From 1fe240406526b9b6256664559d3d2bec9250135c Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期五, 21 十月 2022 18:38:53 +0800
Subject: [PATCH] 设备管理小样

---
 src/assets/img/add.png                                               |    0 
 src/views/equipmentManagement/equipmentList/components/Content.vue   |  260 +++++----
 src/views/equipmentManagement/equipmentList/components/FormList.vue  |  743 +++++++++++++-------------
 src/views/equipmentManagement/equipmentList/components/FormList.scss |   42 +
 src/components/IndexHeader.vue                                       |  140 ++--
 src/views/equipmentManagement/equipmentList/components/InfoCard.vue  |  339 ++++++++----
 src/views/equipmentManagement/equipmentList/index.vue                |   63 +
 7 files changed, 882 insertions(+), 705 deletions(-)

diff --git a/src/assets/img/add.png b/src/assets/img/add.png
new file mode 100644
index 0000000..c6e8aaf
--- /dev/null
+++ b/src/assets/img/add.png
Binary files differ
diff --git a/src/components/IndexHeader.vue b/src/components/IndexHeader.vue
index f1dfd76..a5b8d50 100644
--- a/src/components/IndexHeader.vue
+++ b/src/components/IndexHeader.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="IndexHeader">
     <div class="header" :class="{ showBox: isShow, disOpacity: !opacity }">
-      <!-- 鍙充晶 -->
+      <!-- 宸︿晶 -->
       <div class="left">
         <router-link to="/">
           <img class="logo" src="/images/index/LOGO.png" alt="" />
         </router-link>
         <div class="title" @click="$router.push('/')">宸ヤ笟浜掕仈缃戝钩鍙�</div>
         <div class="label" @click="$router.push('/')">棣栭〉</div>
-        <!-- <div class="label">浜戞湇鍔�</div> -->
+        <div class="label">浜戞湇鍔�</div>
         <div class="label" @click="$router.push('/manageCenter')">绠＄悊涓績</div>
         <div class="label" @click="$router.push('/product')">搴旂敤鍟嗗煄</div>
       </div>
 
-      <!-- 宸︿晶 -->
+      <!-- 鍙充晶 -->
       <div class="right">
         <el-input
           placeholder="璇疯緭鍏ュ叧閿瘝"
@@ -23,28 +23,16 @@
         >
           <div class="iconList" slot="suffix">
             <i class="search iconfont" v-if="!isShow">&#xe607;</i>
-            <i class="search iconfont" @click="search" v-if="isShow"
-              >&#xe607;</i
-            >
-            <i class="del iconfont" v-if="isShow" @click="showInputBox(false)"
-              >&#xe60f;</i
-            >
+            <i class="search iconfont" @click="search" v-if="isShow">&#xe607;</i>
+            <i class="del iconfont" v-if="isShow" @click="showInputBox(false)">&#xe60f;</i>
           </div>
         </el-input>
 
         <!-- 鏈櫥褰曟儏鍐� -->
-        <div
-          class="headerLogin"
-          v-if="!userInfo"
-          @click="$router.push('/login')"
-        >
+        <div class="headerLogin" v-if="!userInfo" @click="$router.push('/login')">
           鐧诲綍
         </div>
-        <div
-          class="register"
-          v-if="!userInfo"
-          @click="$router.push('/register')"
-        >
+        <div class="register" v-if="!userInfo" @click="$router.push('/register')">
           鍏嶈垂娉ㄥ唽
         </div>
 
@@ -62,12 +50,7 @@
     </div>
 
     <!-- 鐢ㄦ埛涓嬫媺妗� -->
-    <div
-      class="userBox"
-      v-if="userInfo && isShowUserBox"
-      @mouseenter="showUserBox"
-      @mouseleave="hiddenUserBox"
-    >
+    <div class="userBox" v-if="userInfo && isShowUserBox" @mouseenter="showUserBox" @mouseleave="hiddenUserBox">
       <div class="userName">{{ userInfo.username }}</div>
       <ul>
         <!--   <li class="money">
@@ -83,9 +66,7 @@
             <router-link to="/personalCenter">涓汉涓績</router-link>
           </div>
 
-          <div class="content">
-            <span class="iconfont">&#xe605;</span> 宸插疄鍚嶈璇�
-          </div>
+          <div class="content"><span class="iconfont">&#xe605;</span> 宸插疄鍚嶈璇�</div>
         </li>
 
         <li>
@@ -118,12 +99,7 @@
       <div class="hotKey">
         <div class="title">鐑棬鎼滅储</div>
         <ul class="keyCard">
-          <li
-            class="keyItem"
-            @click="jumpToSearch(item)"
-            v-for="(item, index) in hotKeyArr"
-            :key="index"
-          >
+          <li class="keyItem" @click="jumpToSearch(item)" v-for="(item, index) in hotKeyArr" :key="index">
             {{ item }}
           </li>
         </ul>
@@ -150,19 +126,19 @@
 </template>
 
 <script>
-import { logout } from "@/api/login";
+import { logout } from "@/api/login"
 
 export default {
   props: {
     opacity: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
   },
   name: "Header",
   created() {
     //灏濊瘯浠巗ession涓嬁鐢ㄦ埛淇℃伅
-    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
+    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
     /*  document.addEventListener("click", () => {
       this.showUserBox = false;
     }); */
@@ -176,82 +152,82 @@
       isShowBox: false, //杈撳叆涓嬫媺妗�
       userInfo: null, //鐢ㄦ埛淇℃伅
       isShowUserBox: false, //鐢ㄦ埛淇℃伅寮瑰眰
-      UserTimer: null, // 鎺у埗寮瑰眰鐨勫畾鏃跺櫒
-    };
+      UserTimer: null // 鎺у埗寮瑰眰鐨勫畾鏃跺櫒
+    }
   },
   methods: {
     // 鎺у埗杈撳叆妗哹ox
     showInputBox(toggle) {
-      this.isShow = toggle;
-      this.isShowBox = toggle;
-      this.keyWord = "";
-      this.$emit("showInputBox", toggle);
+      this.isShow = toggle
+      this.isShowBox = toggle
+      this.keyWord = ""
+      this.$emit("showInputBox", toggle)
     },
 
     //鎺у埗鐢ㄦ埛淇℃伅box
     showUserBox() {
       if (this.UserTimer) {
-        clearTimeout(this.UserTimer);
-        this.UserTimer = null;
+        clearTimeout(this.UserTimer)
+        this.UserTimer = null
       }
-      this.isShowUserBox = true;
+      this.isShowUserBox = true
     },
     hiddenUserBox() {
-      const _this = this;
+      const _this = this
       this.UserTimer = setTimeout(() => {
-        _this.isShowUserBox = false;
-      }, 200);
+        _this.isShowUserBox = false
+      }, 200)
     },
 
     logOut() {
       logout().then(() => {
-        sessionStorage.removeItem("loginedInfo");
-        sessionStorage.removeItem("expires_in");
-        sessionStorage.removeItem("userInfo");
+        sessionStorage.removeItem("loginedInfo")
+        sessionStorage.removeItem("expires_in")
+        sessionStorage.removeItem("userInfo")
         this.$router.push({
-          path: "/login",
-        });
+          path: "/login"
+        })
         this.$notify({
           title: "鎻愮ず",
           type: "success",
           message: "閫�鍑烘垚鍔燂紒",
           duration: 2500,
-          offset: 57,
-        });
-      });
+          offset: 57
+        })
+      })
     },
 
     jump(id, type) {
       if (type) {
-        sessionStorage.setItem("type", type);
+        sessionStorage.setItem("type", type)
       }
       this.$router.push({
         path: "/personalCenter",
         query: {
-          id: id,
-        },
-      });
+          id: id
+        }
+      })
     },
 
     search() {
       this.$router.push({
         path: "/product",
         query: {
-          keyWord: this.keyWord,
-        },
-      });
+          keyWord: this.keyWord
+        }
+      })
     },
 
     jumpToSearch(keyWord) {
       this.$router.push({
         path: "/product",
         query: {
-          keyWord,
-        },
-      });
-    },
-  },
-};
+          keyWord
+        }
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -259,10 +235,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 62px;
+  height: 50px;
   width: 100%;
   min-width: 1280px;
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: #1f2a3e;
   color: #fff;
   font-size: 14px;
 
@@ -276,12 +252,12 @@
     }
 
     .title {
-      margin-right: 10px;
+      margin-right: 30px;
       cursor: pointer;
     }
 
     .label {
-      margin: 0 20px;
+      margin-right: 20px;
       cursor: pointer;
     }
   }
@@ -346,16 +322,22 @@
   &:hover,
   &.showBox,
   &.disOpacity {
-    background-color: #fff;
+    background-color: #1f2a3e;
 
     .left {
+      font-family: PingFang SC Regular;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 20px;
+      letter-spacing: 0px;
+      color: #ffffff;
       .title {
-        color: #3d3d3d;
+        // color: #3d3d3d;
         font-weight: 700;
       }
 
       .label {
-        color: #3d3d3d;
+        // color: #3d3d3d;
         &:hover {
           color: #0065ff;
         }
@@ -534,4 +516,4 @@
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/equipmentManagement/equipmentList/components/Content.vue b/src/views/equipmentManagement/equipmentList/components/Content.vue
index bb69fb1..ebc46aa 100644
--- a/src/views/equipmentManagement/equipmentList/components/Content.vue
+++ b/src/views/equipmentManagement/equipmentList/components/Content.vue
@@ -1,62 +1,57 @@
 <template>
   <div class="whiteContent Content">
-    <div class="title">璁惧鍦板浘</div>
+    <div class="title" v-show="false">璁惧鍦板浘</div>
 
     <!-- 鍏ㄥ睆鎸夐挳 -->
     <img
       class="zoomOut iconfont"
       src="/images/equipmentManagement/full.png"
       @click="toggleZoom('Full')"
-      v-if="!isFull"
+      v-show="false"
     />
     <!-- 鍙栨秷鍏ㄥ睆鐨勬寜閽� -->
-    <img
-      class="zoomOut iconfont"
-      src="/images/equipmentManagement/quit.png"
-      @click="toggleZoom('')"
-      v-else
-    />
-    <!-- 鏅�氬湴鍥� -->
-    <div id="map" v-if="!isFull"></div>
+    <img class="zoomOut iconfont" src="/images/equipmentManagement/quit.png" @click="toggleZoom('')" v-show="false" />
+
+    <!-- 鏅�氬湴鍥�  v-show="false" -->
+    <div class="map-box">
+      <div class="map-txt">璁惧鍦板浘</div>
+      <div id="map"></div>
+    </div>
     <!-- 鍏ㄥ睆鍦板浘 -->
-    <div id="mapFull" v-else></div>
-    <InfoCard
-      @close="closeCard"
-      v-if="isShowCard"
-      :node="activeNode"
-    ></InfoCard>
+    <div id="mapFull" v-show="false"></div>
+    <InfoCard @close="closeCard" v-if="isShowCard" :node="activeNode"></InfoCard>
     <FormList v-if="!isFull"></FormList>
   </div>
 </template>
 
 <script>
-import { findDevList } from "@/api/device";
-import AMapLoader from "@amap/amap-jsapi-loader";
-import InfoCard from "@/views/equipmentManagement/equipmentList/components/InfoCard";
-import FormList from "@/views/equipmentManagement/equipmentList/components/FormList";
+import { findDevList } from "@/api/device"
+import AMapLoader from "@amap/amap-jsapi-loader"
+import InfoCard from "@/views/equipmentManagement/equipmentList/components/InfoCard"
+import FormList from "@/views/equipmentManagement/equipmentList/components/FormList"
 
-import bus from "@/plugin/bus";
+import bus from "@/plugin/bus"
 
 export default {
   created() {
     window._AMapSecurityConfig = {
-      securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4",
-    };
+      securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4"
+    }
   },
   mounted() {
-    this.initMap("");
+    this.initMap("")
     bus.$on("refleshNode", (node) => {
-      this.nodes = node;
-      this.initNode();
-    });
+      this.nodes = node
+      this.initNode()
+    })
   },
   beforeDestroy() {
-    bus.$off("refleshNode");
+    bus.$off("refleshNode")
   },
 
   components: {
     InfoCard, //璁惧淇℃伅寮瑰眰
-    FormList, //琛ㄦ牸
+    FormList //琛ㄦ牸
   },
   data() {
     return {
@@ -69,8 +64,8 @@
       center: [116.06157, 39.66157], //鍦板浘涓績
       activeNode: null, //閫変腑鐨勫湴鍥捐妭鐐�
       geocoder: {},
-      myMaker: null,
-    };
+      myMaker: null
+    }
   },
 
   methods: {
@@ -79,39 +74,39 @@
       AMapLoader.load({
         key: "69cd7e958683e8462beab5c08e6bc21b", // 鐢宠濂界殑Web绔紑鍙戣�匥ey锛岄娆¤皟鐢� load 鏃跺繀濉�
         version: "2.0", // 鎸囧畾瑕佸姞杞界殑 JSAPI 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
-        plugins: ["AMap.Geocoder", "AMap.Geolocation"], // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
+        plugins: ["AMap.Geocoder", "AMap.Geolocation"] // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
       })
         .then((AMap) => {
-          this.AMap = AMap;
+          this.AMap = AMap
           this.map = new AMap.Map(`map${status}`, {
             //璁剧疆鍦板浘瀹瑰櫒id
             zoom: this.zoom, //鍒濆鍖栧湴鍥剧骇鍒�
-            center: this.center, //鍒濆鍖栧湴鍥句腑蹇冪偣浣嶇疆
-          });
+            center: this.center //鍒濆鍖栧湴鍥句腑蹇冪偣浣嶇疆
+          })
 
           //鍒濆鍖栨煡璇㈠湴鐞嗕綅缃彃浠�
           AMap.plugin("AMap.Geocoder", () => {
-            this.geocoder = new AMap.Geocoder();
-          });
+            this.geocoder = new AMap.Geocoder()
+          })
 
-          this.initNode();
+          this.initNode()
         })
         .catch((e) => {
-          console.log(e);
-        });
+          console.log(e)
+        })
     },
     //鍒濆鍖栬妭鐐�
     initNode() {
       if (this.myMaker) {
-        this.myMaker.destroy();
+        this.myMaker.destroy()
       }
       this.nodes.filter((item, index) => {
         //鏌ヨ琛屾斂浣嶇疆
         this.geocoder.getAddress([item.lon, item.lat], (status, result) => {
           // 鑺傜偣鍧愭爣
-          let position = new this.AMap.LngLat(item.lon, item.lat);
+          let position = new this.AMap.LngLat(item.lon, item.lat)
           // 鑺傜偣鍦扮悊浣嶇疆
-          item.province = result.regeocode.addressComponent.province;
+          item.province = result.regeocode.addressComponent.province
 
           //淇℃伅妗哾om
           let markerContent =
@@ -119,57 +114,57 @@
             `<div class="nodeMarker" id="node${index}}">` +
             '<img class="normal" src="/images/equipmentManagement/default.png">' +
             '<img class="selected" src="/images/equipmentManagement/select.png">' +
-            `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP鍦板潃: <span class="data">${item.devIp}</span> </div> <div class="property">璁惧浣嶇疆: <span class="data">${item.province}</span></div><div class="property">瀹夎鏃堕棿: <span class="data">${item.installTime}</span></div></div>`;
-          ("</div>");
+            `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP鍦板潃: <span class="data">${item.devIp}</span> </div> <div class="property">璁惧浣嶇疆: <span class="data">${item.province}</span></div><div class="property">瀹夎鏃堕棿: <span class="data">${item.installTime}</span></div></div>`
+          ;("</div>")
 
           let marker = new this.AMap.Marker({
             position: position,
             // 灏� html 浼犵粰 content
             content: markerContent,
             // 浠� icon 鐨� [center bottom] 涓哄師鐐�
-            offset: new this.AMap.Pixel(-24, -24),
-          });
+            offset: new this.AMap.Pixel(-24, -24)
+          })
 
           //缁欒妭鐐规坊鍔犵殑鐩戝惉
           marker.on("click", () => {
-            this.activeNode = item;
-            this.isShowCard = true;
-          });
+            this.activeNode = item
+            this.isShowCard = true
+          })
 
-          this.map.add(marker);
-          this.myMaker = marker;
-        });
-      });
+          this.map.add(marker)
+          this.myMaker = marker
+        })
+      })
     },
     //鍏抽棴璁惧璇︽儏寮瑰眰
     closeCard() {
-      this.isShowCard = false;
+      this.isShowCard = false
     },
     //鍒囨崲鍏ㄥ睆鍦板浘
     toggleZoom(status) {
       //鑾峰彇褰撳墠鍦板浘绾у埆
-      this.zoom = this.map.getZoom();
+      this.zoom = this.map.getZoom()
       //鑾峰彇褰撳墠鍦板浘涓績浣嶇疆
-      let data = this.map.getCenter();
-      this.center = [data.lng, data.lat];
+      let data = this.map.getCenter()
+      this.center = [data.lng, data.lat]
       if (status) {
-        this.isFull = true;
+        this.isFull = true
       } else {
-        this.isFull = false;
+        this.isFull = false
       }
-      this.initMap(status);
-    },
-  },
-};
+      this.initMap(status)
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
 .whiteContent {
   position: relative;
   box-sizing: border-box;
-  padding: 20px;
+  // padding: 20px;
   width: 1280px;
-  background-color: #fff;
+  // background-color: #34405a;
   margin: 0 auto;
 
   .title {
@@ -177,68 +172,83 @@
     font-weight: bold;
     font-size: 16px;
   }
+  .map-box {
+    background-color: #1f2a3e;
+    border-radius: 18px;
+    // width: 100%;
+    padding: 24px;
+    margin-bottom: 24px;
+    .map-txt {
+      font-family: PingFang SC Heavy;
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 24px;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-bottom: 16px;
+    }
+    #map,
+    #mapFull {
+      width: 1232px;
+      height: 496px;
+      border-radius: 8px;
 
-  #map,
-  #mapFull {
-    width: 100%;
-    height: 500px;
-    border-radius: 8px;
-
-    ::v-deep .nodeMarker {
-      position: relative;
-      .selected {
-        display: none;
-      }
-
-      .box {
-        box-sizing: border-box;
-        display: none;
-        position: absolute;
-        padding: 20px 10px;
-        top: 40px;
-        left: -100px;
-        width: 247px;
-        height: 160px;
-        background-color: rgba($color: #fff, $alpha: 0.8);
-        filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
-
-        .name {
-          margin-bottom: 14px;
-          font-weight: bold;
-          font-size: 16px;
-        }
-
-        .property {
-          margin-bottom: 12px;
-          font-size: 14px;
-          color: #999;
-
-          span {
-            margin-left: 5px;
-            color: #3d3d3d;
-            font-weight: 700;
-          }
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
-
-      &:hover {
-        .normal {
+      ::v-deep .nodeMarker {
+        position: relative;
+        .selected {
           display: none;
         }
 
-        .selected {
-          position: relative;
-          top: -16px;
-          left: -16px;
-          display: inline-block;
+        .box {
+          box-sizing: border-box;
+          display: none;
+          position: absolute;
+          padding: 20px 10px;
+          top: 40px;
+          left: -100px;
+          width: 247px;
+          height: 160px;
+          background-color: rgba($color: #fff, $alpha: 0.8);
+          filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
+
+          .name {
+            margin-bottom: 14px;
+            font-weight: bold;
+            font-size: 16px;
+          }
+
+          .property {
+            margin-bottom: 12px;
+            font-size: 14px;
+            color: #999;
+
+            span {
+              margin-left: 5px;
+              color: #3d3d3d;
+              font-weight: 700;
+            }
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
         }
 
-        .box {
-          display: inline-block;
+        &:hover {
+          .normal {
+            display: none;
+          }
+
+          .selected {
+            position: relative;
+            top: -16px;
+            left: -16px;
+            display: inline-block;
+          }
+
+          .box {
+            display: inline-block;
+          }
         }
       }
     }
@@ -250,8 +260,8 @@
 
   .InfoCard {
     position: absolute;
-    top: 58px;
-    right: 26px;
+    top: 68px;
+    right: 28px;
     z-index: 2;
   }
 
@@ -264,4 +274,4 @@
     cursor: pointer;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/equipmentManagement/equipmentList/components/FormList.scss b/src/views/equipmentManagement/equipmentList/components/FormList.scss
new file mode 100644
index 0000000..49bbfc5
--- /dev/null
+++ b/src/views/equipmentManagement/equipmentList/components/FormList.scss
@@ -0,0 +1,42 @@
+.el-table th,
+.el-table tr {
+  background-color: transparent !important;
+}
+.el-table,
+.el-table__expanded-cell {
+  background-color: transparent !important;
+}
+.has-gutter {
+  background: rgba(255, 255, 255, 0.18) !important;
+}
+.el-table__body-wrapper {
+  background: rgba(255, 255, 255, 0.08) !important;
+  font-family: PingFang SC Regular;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: rgba(255, 255, 255, 0.9);
+}
+// class="has-gutter"
+.el-table__header-wrapper {
+  border-radius: 3px 3px 0 0;
+}
+.FormList .search .left .el-input {
+  width: 150px;
+}
+.el-input__inner {
+  background-color: transparent !important;
+}
+.el-range-input {
+  background-color: transparent !important;
+}
+// .el-table__row > td {
+//   // border: none !important;
+// }
+.el-table__cell {
+  border: none !important; //琛ㄦ牸鐨勭嚎
+}
+.el-input input {
+  border-radius: 3px !important;
+}
diff --git a/src/views/equipmentManagement/equipmentList/components/FormList.vue b/src/views/equipmentManagement/equipmentList/components/FormList.vue
index f46981c..85fb0fb 100644
--- a/src/views/equipmentManagement/equipmentList/components/FormList.vue
+++ b/src/views/equipmentManagement/equipmentList/components/FormList.vue
@@ -3,6 +3,54 @@
     <div class="search">
       <div class="left">
         <div class="id">
+          <div class="left-txt">璁惧鍚嶇О/ID</div>
+          <el-input class="id-input" v-model="inputText" placeholder="璇疯緭鍏ヨ澶囧悕绉�/ID"></el-input>
+        </div>
+
+        <div class="time">
+          <div class="left-txt">璁惧瀹夎鏃堕棿</div>
+
+          <el-date-picker
+            style="width: 380px"
+            v-model="searchTime"
+            @change="searchingBtn"
+            type="datetimerange"
+            size="small"
+            start-placeholder="寮�濮嬫棩鏈�"
+            end-placeholder="缁撴潫鏃ユ湡"
+            :default-time="['00:00:00', '23:59:59']"
+          ></el-date-picker>
+        </div>
+
+        <div class="cluster">
+          <div class="left-txt">鎵�灞為泦缇�</div>
+          <div class="cluster-select">
+            <el-select style="width: 200px" v-model="cluster" placeholder="璇烽�夋嫨鎵�灞為泦缇�">
+              <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="button searchBtn" @click="searchingBtn">鎼滅储</div>
+        <div class="button resetBtn" @click="clearSearch">閲嶇疆</div>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="btns">
+      <div class="button add" @click="isShowAdd = true">
+        <img src="@/assets/img/add.png" alt="" />
+        <div class="button-txt">娣诲姞璁惧</div>
+      </div>
+      <div class="button export" @click="exportFile">
+        <div class="iconfont">&#xe614;</div>
+        <div class="button-txt">瀵煎嚭</div>
+      </div>
+    </div>
+
+    <!-- <div class="left">
+        <div class="id">
           璁惧鍚嶇О/ID
           <el-input v-model="inputText" placeholder="璇疯緭鍏�"></el-input>
         </div>
@@ -23,35 +71,28 @@
         <div class="cluster">
           鎵�灞為泦缇�
           <el-select v-model="cluster" placeholder="璇烽�夋嫨">
-            <el-option
-              v-for="item in clusterArr"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
+            <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
-      </div>
+      </div> -->
 
-      <div class="right">
-        <div class="button searchBtn" @click="searchingBtn">鎼滅储</div>
-        <div class="button resetBtn" @click="clearSearch">閲嶇疆</div>
-      </div>
-    </div>
+    <!-- <el-table-column label="棣栨浣跨敤鏃堕棿" min-width="159">
+          <template slot-scope="scope">
+            <div v-if="scope.row.firstUseTime.length > 1">
+              <div>{{ scope.row.firstUseTime[0] }}</div>
+              <div>{{ scope.row.firstUseTime[1] }}</div>
+            </div>
+            <div v-else>--</div>
+          </template>
+        </el-table-column> -->
 
-    <div class="btns">
-      <div class="button add" @click="isShowAdd = true">
-        <span>+</span>娣诲姞璁惧
-      </div>
-      <div class="button export" @click="exportFile">
-        <span class="iconfont">&#xe614;</span>瀵煎嚭
-      </div>
-    </div>
-
+    <!-- height="50" 
+        -->
     <div class="table-area">
       <el-table
         id="multipleTable"
+        :header-cell-style="{ height: '50px' }"
         ref="multipleTable"
         tooltip-effect="dark"
         :data="dataList"
@@ -60,27 +101,11 @@
         :stripe="true"
       >
         <el-table-column label="搴忓彿" width="80" class-name="index">
-          <template slot-scope="scope">{{
-            scope.$index + 1 + (page - 1) * size
-          }}</template>
+          <template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template>
         </el-table-column>
-        <el-table-column
-          prop="devId"
-          label="璁惧ID"
-          min-width="140"
-          show-overflow-tooltip
-        ></el-table-column>
-        <el-table-column
-          prop="devName"
-          label="璁惧鍚嶇О"
-          min-width="140"
-          show-overflow-tooltip
-        ></el-table-column>
-        <el-table-column
-          prop="devIp"
-          label="IP鍦板潃"
-          min-width="150"
-        ></el-table-column>
+        <el-table-column prop="devId" label="璁惧ID" min-width="210" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="devName" label="璁惧鍚嶇О" min-width="140" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="devIp" label="IP鍦板潃" min-width="150"></el-table-column>
         <el-table-column label="瀹夎鏃堕棿" min-width="159">
           <template slot-scope="scope">
             <div v-if="scope.row.installTime.length > 1">
@@ -90,15 +115,6 @@
             <div v-else>--</div>
           </template>
         </el-table-column>
-        <!-- <el-table-column label="棣栨浣跨敤鏃堕棿" min-width="159">
-          <template slot-scope="scope">
-            <div v-if="scope.row.firstUseTime.length > 1">
-              <div>{{ scope.row.firstUseTime[0] }}</div>
-              <div>{{ scope.row.firstUseTime[1] }}</div>
-            </div>
-            <div v-else>--</div>
-          </template>
-        </el-table-column> -->
 
         <el-table-column label="鎵�灞為泦缇�" show-overflow-tooltip min-width="154">
           <template slot-scope="scope"> {{ scope.row.clusterName }} </template>
@@ -113,12 +129,7 @@
 
         <el-table-column label="鎿嶄綔" min-width="180">
           <template slot-scope="scope">
-            <!-- 鍔犲叆 -->
-            <el-tooltip
-              content="鍔犲叆闆嗙兢"
-              placement="top"
-              v-if="!scope.row.clusterId"
-            >
+            <el-tooltip content="鍔犲叆闆嗙兢" placement="top" v-if="!scope.row.clusterId">
               <span
                 class="iconfont option"
                 @click="joinCluster(scope.row)"
@@ -126,7 +137,7 @@
                 >&#xe640;</span
               >
             </el-tooltip>
-            <!-- 閫�鍑� -->
+
             <el-tooltip content="閫�鍑洪泦缇�" placement="top" v-else>
               <span
                 class="iconfont option"
@@ -135,7 +146,7 @@
                 >&#xe63c;</span
               >
             </el-tooltip>
-            <!-- 绠楁硶璇︽儏 -->
+
             <el-tooltip content="搴旂敤璇︽儏" placement="top">
               <span
                 class="iconfont option"
@@ -144,7 +155,7 @@
                 >&#xe621;</span
               >
             </el-tooltip>
-            <!-- 璁惧璇︽儏 -->
+
             <el-tooltip content="璁惧璇︽儏" placement="top">
               <span
                 class="iconfont option"
@@ -153,12 +164,9 @@
                 >&#xe619;</span
               >
             </el-tooltip>
-            <!-- 瑙ｇ粦 -->
+
             <el-tooltip content="瑙ｉ櫎缁戝畾" placement="top">
-              <span
-                class="iconfont option"
-                @click="Untying(scope.row)"
-                :class="{ disable: scope.row.isOnline != 1 }"
+              <span class="iconfont option" @click="Untying(scope.row)" :class="{ disable: scope.row.isOnline != 1 }"
                 >&#xe617;</span
               >
             </el-tooltip>
@@ -166,7 +174,7 @@
         </el-table-column>
       </el-table>
       <div>
-        <el-pagination
+        <!-- <el-pagination
           @current-change="refrash"
           @size-change="handleSizeChange"
           :current-page="page"
@@ -175,62 +183,46 @@
           :page-sizes="[5, 10, 15, 20, 25]"
           :total="total"
           background
-        ></el-pagination>
+        ></el-pagination> -->
       </div>
     </div>
 
     <!-- 瑙ｇ粦寮圭獥 -->
-    <UnbindBox
-      @close="closeUnbindBox"
-      v-if="isShowUnbind"
-      :id="unbindId"
-      @reflash="reflash"
-    ></UnbindBox>
+    <UnbindBox @close="closeUnbindBox" v-if="isShowUnbind" :id="unbindId" @reflash="reflash"></UnbindBox>
 
     <!-- 娣诲姞璁惧寮圭獥 -->
     <AddBox @close="closeAddBox" v-if="isShowAdd"></AddBox>
 
     <!-- 閫�鍑洪泦缇ゅ脊绐� -->
-    <QuitClusterBox
-      :equipment="activeEquipment"
-      v-if="showQuit"
-      @close="showQuit = false"
-    ></QuitClusterBox>
+    <QuitClusterBox :equipment="activeEquipment" v-if="showQuit" @close="showQuit = false"></QuitClusterBox>
 
     <!-- 鍔犲叆闆嗙兢寮圭獥 -->
-    <JoinClusterBox
-      :equipment="activeEquipment"
-      v-if="showJoin"
-      @close="showJoin = false"
-    ></JoinClusterBox>
+    <JoinClusterBox :equipment="activeEquipment" v-if="showJoin" @close="showJoin = false"></JoinClusterBox>
   </div>
 </template>
 
 <script>
-import {
-  findDevList,
-  findClustersBySearch,
-  exportDevListExcel,
-} from "@/api/device";
-import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox";
-import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox";
-import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox";
-import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox";
-
-import bus from "@/plugin/bus";
-
+import { findDevList, findClustersBySearch, exportDevListExcel } from "@/api/device"
+import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox"
+import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox"
+import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox"
+import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox"
+import add from "@/assets/img/add.png"
+import bus from "@/plugin/bus"
+import "./FormList.scss"
 export default {
   components: {
     AddBox,
     UnbindBox,
     QuitClusterBox,
-    JoinClusterBox,
+    JoinClusterBox
   },
   created() {
-    this.getCluster();
+    this.getCluster()
   },
   data() {
     return {
+      add,
       searchTime: [], //鎼滅储鏃堕棿
       page: 1,
       size: 10, //鍒嗛〉鐩稿叧
@@ -244,8 +236,8 @@
       cluster: null, //閫変腑鐨勯泦缇ょ被鍨�
       showQuit: false, //灞曠ず閫�鍑洪泦缇ょ殑寮圭獥
       showJoin: false, //灞曠ず鍔犲叆闆嗙兢鐨勫脊绐�
-      activeEquipment: null, //澶勭悊涓殑璁惧
-    };
+      activeEquipment: null //澶勭悊涓殑璁惧
+    }
   },
   methods: {
     async getCluster() {
@@ -253,47 +245,47 @@
         InputText: "",
         Page: 1,
         Size: 10000,
-        userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
-      });
+        userId: JSON.parse(sessionStorage.getItem("userInfo")).id
+      })
       if (res && res.success) {
         res.data.list.forEach((item) => {
           this.clusterArr.push({
             label: item.clusterName,
-            value: item.clusterId,
-          });
-        });
+            value: item.clusterId
+          })
+        })
       }
     },
 
     // 璺冲埌璁惧璇︽儏
     checkDetail(row) {
       if (row.isOnline != 1) {
-        return;
+        return
       }
       this.$router.push({
         path: "/equipmentDetail",
         query: {
-          id: row.devId,
-        },
-      });
+          id: row.devId
+        }
+      })
     },
 
     // 璺冲埌绠楁硶璇︽儏
     algorithmDetail(row) {
       if (row.isOnline != 1) {
-        return;
+        return
       }
       this.$router.push({
         path: "/algorithmDetail",
         query: {
-          id: row.devId,
-        },
-      });
+          id: row.devId
+        }
+      })
     },
 
     // 鏌ヨ鍒楄〃
     searchingBtn() {
-      let param = {};
+      let param = {}
 
       if (!this.searchTime) {
         param = {
@@ -302,8 +294,8 @@
           startTime: "",
           endTime: "",
           clusterId: this.cluster,
-          inputText: this.inputText,
-        };
+          inputText: this.inputText
+        }
       } else {
         param = {
           page: this.page,
@@ -311,112 +303,109 @@
           startTime: this.searchTime[0],
           endTime: this.searchTime[1],
           clusterId: this.cluster,
-          inputText: this.inputText,
-        };
+          inputText: this.inputText
+        }
       }
 
       findDevList(param)
         .then((res) => {
-          this.dataList = res.data.list;
+          this.dataList = res.data.list
           //鏃堕棿鍒嗚鏄剧ず
           this.dataList.forEach((item) => {
-            item.installTime = item.installTime.split(" ");
-            item.firstUseTime = item.firstUseTime.split(" ");
-          });
-          this.total = res.data.total;
+            item.installTime = item.installTime.split(" ")
+            item.firstUseTime = item.firstUseTime.split(" ")
+          })
+          this.total = res.data.total
           if (res.data.total <= this.size) {
-            this.page = 1;
+            this.page = 1
           }
 
-          bus.$emit("refleshNode", this.dataList);
+          bus.$emit("refleshNode", this.dataList)
         })
         .catch((err) => {
-          console.log(err);
-        });
+          console.log(err)
+        })
     },
 
     //鍒嗛〉鍔熻兘
     handleSizeChange(size) {
-      this.size = size;
-      this.searchingBtn();
+      this.size = size
+      this.searchingBtn()
     },
     //鍒嗛〉鍔熻兘
     refrash(page) {
-      this.page = page;
-      this.searchingBtn();
+      this.page = page
+      this.searchingBtn()
     },
 
     //瑙ｇ粦鎸夐挳
     Untying(row) {
       if (row.isOnline != 1) {
-        return;
+        return
       }
-      this.unbindId = row.devId;
-      this.isShowUnbind = true;
+      this.unbindId = row.devId
+      this.isShowUnbind = true
     },
 
     //鑾峰緱榛樿鏃堕棿
     getDateInit() {
       // 瑕佹眰 榛樿涓�涓湀
-      const end = new Date();
-      const start = new Date();
-      const nowDate = new Date();
-      nowDate.setHours(0);
-      nowDate.setMinutes(0);
-      nowDate.setSeconds(0);
-      nowDate.setMilliseconds(0);
-      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
-      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
-      return [
-        this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
-        this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
-      ];
+      const end = new Date()
+      const start = new Date()
+      const nowDate = new Date()
+      nowDate.setHours(0)
+      nowDate.setMinutes(0)
+      nowDate.setSeconds(0)
+      nowDate.setMilliseconds(0)
+      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
+      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
+      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
     },
 
     //鍏抽棴鏂板寮圭獥
     closeAddBox() {
-      this.isShowAdd = false;
-      this.searchingBtn();
+      this.isShowAdd = false
+      this.searchingBtn()
     },
     // 鍏抽棴瑙ｇ粦寮圭獥
     closeUnbindBox() {
-      this.isShowUnbind = false;
+      this.isShowUnbind = false
     },
 
     //瑙ｇ粦鎴愬姛鍥炶皟
     reflash() {
-      this.isShowUnbind = false;
-      this.searchingBtn();
+      this.isShowUnbind = false
+      this.searchingBtn()
     },
 
     clearSearch() {
-      this.searchTime = this.getDateInit();
-      this.inputText = "";
-      this.cluster = "";
-      this.searchingBtn();
+      this.searchTime = this.getDateInit()
+      this.inputText = ""
+      this.cluster = ""
+      this.searchingBtn()
     },
 
     //閫�鍑洪泦缇�
     quitCluster(equipment) {
       if (equipment.isOnline != 1) {
-        return;
+        return
       }
-      this.activeEquipment = equipment;
-      this.showQuit = true;
+      this.activeEquipment = equipment
+      this.showQuit = true
     },
 
     //鍔犲叆闆嗙兢
     joinCluster(equipment) {
       if (equipment.isOnline != 1) {
-        return;
+        return
       }
-      this.activeEquipment = equipment;
-      this.showJoin = true;
+      this.activeEquipment = equipment
+      this.showJoin = true
     },
 
     //瀵煎嚭鍒楄〃鏂囦欢
     async exportFile() {
-      let param = {};
+      let param = {}
 
       if (!this.searchTime) {
         param = {
@@ -425,8 +414,8 @@
           startTime: "",
           endTime: "",
           clusterId: this.cluster,
-          inputText: this.inputText,
-        };
+          inputText: this.inputText
+        }
       } else {
         param = {
           page: this.page,
@@ -434,224 +423,246 @@
           startTime: this.searchTime[0],
           endTime: this.searchTime[1],
           clusterId: this.cluster,
-          inputText: this.inputText,
-        };
+          inputText: this.inputText
+        }
       }
-      const result = await exportDevListExcel(param);
+      const result = await exportDevListExcel(param)
 
       var blob = new Blob([result.body.data], {
-          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
         }),
-        Temp = document.createElement("a");
+        Temp = document.createElement("a")
 
-      Temp.href = window.URL.createObjectURL(blob);
+      Temp.href = window.URL.createObjectURL(blob)
+      Temp.download = window.decodeURI(result.fileName)
 
-      console.log(result);
-      console.log(result.fileName);
+      Temp.setAttribute("download", result.fileName)
 
-      Temp.download = window.decodeURI(result.fileName);
+      document.body.appendChild(Temp)
 
-      Temp.setAttribute("download", result.fileName);
+      Temp.click()
 
-      document.body.appendChild(Temp);
+      document.body.removeChild(Temp)
 
-      Temp.click();
-
-      document.body.removeChild(Temp);
-
-      window.URL.revokeObjectURL(Temp);
-    },
+      window.URL.revokeObjectURL(Temp)
+    }
   },
   mounted() {
-    this.searchingBtn();
-  },
-};
+    this.searchingBtn()
+  }
+}
 </script>
 
 <style scoped lang="scss">
 .FormList {
+  width: 1280px;
+  // padding: 0 24px;
+  // background: #36b24a;
+  background-color: #1f2a3e;
+  border-radius: 18px;
+  // background: #34405a;
   .search {
+    // margin-bottom: ;
     display: flex;
     justify-content: space-between;
-    padding: 60px 0 30px 0;
-    font-size: 14px;
-    border-bottom: 1px solid #e9ebee;
-    background-color: #fff;
-
-    .left,
-    .right,
-    .id,
-    .time,
-    .cluster {
+    padding: 24px;
+    .left {
       display: flex;
       align-items: center;
-    }
+      .left-txt {
+        // height: 20px;
+        white-space: nowrap;
+        font-family: PingFang SC Regular;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 20px;
+        letter-spacing: 0px;
+        color: #ffffff;
+        margin-right: 16px;
+      }
+      .id,
+      .time,
+      .cluster {
+        display: flex;
+        align-items: center;
+        padding-right: 24px;
+      }
+      .id ::v-deep .el-input .el-input__inner {
+        width: 150px;
+        height: 32px;
+        border-radius: 3px;
+        background: rgb(0, 0, 0, 0.2) !important;
+      }
+      .cluster::v-deep .el-input {
+        width: 250px;
+        height: 32px;
+        // margin-left: 10px;
+        // margin-right: 20px;
 
-    .cluster {
-      .el-select {
-        width: 190px;
-        height: 40px;
-        line-height: 40px;
+        input {
+          border-radius: 1px;
+          &::-webkit-input-placeholder {
+            color: #999;
+          }
 
-        ::v-deep input {
-          height: 40px;
+          // &:focus {
+          //   border-color: #0065ff;
+          // }
         }
+      }
+      .cluster {
+        // .cluster-select {
+        //   width: 150px;
+        // }
+        .el-select {
+          width: 150px;
+          .el-input .el-input--suffix {
+            width: 150px !important;
+            // border-radius: 3px;
+          }
+          // height: 32px;
+          // line-height: 32px;
 
-        .el-icon-arrow-up {
-          line-height: 40px;
-        }
-
-        ::v-deep .el-icon-arrow-up {
-          height: 40px;
+          // ::v-deep input {
+          //   height: 32px;
+          // }
+          // el-select__caret el-input__icon el-icon-arrow-up
+          ::v-deep .el-input__icon {
+            line-height: 28px !important;
+          }
         }
       }
     }
-
-    .id .el-input ::v-deep {
-      width: 180px;
-    }
-
-    .cluster::v-deep .el-input {
-      width: 156px;
-      height: 40px;
-      margin-left: 10px;
-      margin-right: 20px;
-
-      input {
-        border-radius: 0;
-        &::-webkit-input-placeholder {
-          color: #999;
-        }
-
-        &:focus {
-          border-color: #0065ff;
-        }
+    .right {
+      display: flex;
+      align-items: center;
+      .button {
+        font-family: PingFang SC Regular;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 32px;
+        letter-spacing: 0px;
+        padding: 0 16px;
+        border-radius: 3px;
+        margin: 0 4px;
       }
-    }
-
-    .el-input ::v-deep {
-      width: 270px;
-      height: 40px;
-      margin-left: 10px;
-      margin-right: 20px;
-
-      input {
-        border-radius: 0;
-        &::-webkit-input-placeholder {
-          color: #999;
-        }
-
-        &:focus {
-          border-color: #0065ff;
-        }
+      .searchBtn {
+        background: #0082bc;
+        color: #ffffff;
       }
-    }
-
-    .el-date-editor {
-      width: 340px;
-      height: 40px;
-      margin-left: 10px;
-      margin-right: 20px;
-      border-radius: 0;
-
-      &::-webkit-input-placeholder {
-        color: #999;
+      .resetBtn {
+        border: 1px solid #0082bc;
+        color: #0082bc;
       }
-
-      &.is-active {
-        border-color: #0065ff;
-      }
-    }
-
-    .searchBtn {
-      width: 110px;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      color: #fff;
-      background: #0065ff;
-      margin-right: 20px;
-    }
-
-    .resetBtn {
-      width: 110px;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      color: #0065ff;
-      border: 1px solid #0065ff;
     }
   }
-
+  .line {
+    border: 1px solid #ffffff;
+    opacity: 0.2;
+    margin: 0 24px;
+  }
   .btns {
+    padding: 24px 24px;
     display: flex;
-    margin: 30px 0;
-    text-align: center;
-    line-height: 40px;
+    justify-content: flex-start;
+    .button {
+      padding: 0 16px;
+      margin: 0 4px;
 
-    .add {
-      margin-right: 20px;
-      width: 140px;
-      height: 40px;
-      background: #0065ff;
-      color: #fff;
-      span {
-        margin-right: 10px;
-        font-weight: 700;
-        font-size: 18px;
+      border-radius: 3px;
+      font-family: PingFang SC Regular;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 32px;
+      letter-spacing: 0px;
+      display: flex;
+      align-items: center;
+      .button-txt {
+        margin-left: 10px;
+      }
+      .iconfont {
+        // width: 12px;
+        // height: 12px;
+        // line-height: 12px;
+        font-size: 16px;
       }
     }
-
+    .add {
+      background: #0082bc;
+      color: #ffffff;
+    }
     .export {
-      width: 140px;
-      height: 40px;
-      border: 1px solid #0065ff;
-      color: #0065ff;
-
-      span {
-        margin-right: 10px;
-        font-size: 18px;
-      }
+      border: 1px solid #0082bc;
+      color: #0082bc;
     }
   }
 
+  .table-area {
+    // min-height: 600px;
+    padding: 0 24px 24px;
+  }
+  .table-area >>> .el-table__row > td {
+    border: none !important;
+  }
+  .el-table::before {
+    height: 0; //琛ㄦ牸鐨勭嚎
+  }
+  // .el-table,
   .el-table ::v-deep {
-    background-color: rgb(233, 235, 238);
+    // background-color: rgb(233, 235, 238);
     padding: 1px;
+    // .el-table__expanded-cell {
+    //   background-color: transparent !important;
+    // }
+    // .el-table__header {
+    //   background: rgba(255, 255, 255, 0.18) !important;
+    // }
 
-    &::after {
-      display: none;
-    }
+    // .el-table th,
+    // .el-table tr {
+    //   background-color: transparent !important;
+    // }
 
-    td.index .cell {
-      padding-left: 16px;
-      padding-right: 4px;
-    }
+    // .el-table tr
+    // &::after {
+    //   display: none;
+    // }
+
+    // td.index .cell {
+    //   padding-left: 16px;
+    //   padding-right: 4px;
+    // }
 
     .has-gutter tr th {
-      background: #f0f3f5;
+      // background: #f0f3f5;
       font-size: 16px;
-      color: #3d3d3d;
+      color: #ffffff;
       font-weight: 700;
+
+      font-family: PingFangSC-Bold;
+      font-size: 12px;
+      font-weight: normal;
+      line-height: 20px;
+      letter-spacing: 0px;
     }
 
-    td .cell {
-      color: #3d3d3d;
-    }
+    // td .cell {
+    //   color: #3d3d3d;
+    // }
 
     tr:hover > td.el-table__cell {
-      background-color: #fff;
+      background: rgba(255, 255, 255, 0.08) !important;
     }
 
-    .el-table__row--striped .el-table__cell {
-      background-color: #f0f5fa !important;
+    .el-table__row .el-table__cell {
+      background-color: transparent !important;
     }
-    tr:hover > td.el-table__cell {
-      background-color: #fff;
-    }
+    // tr:hover > td.el-table__cell {
+    //   // background-color: #fff;
+    // }
 
     .el-table__row--striped .el-table__cell {
-      background-color: #f0f5fa !important;
+      background-color: transparent !important;
     }
 
     .status {
@@ -665,7 +676,7 @@
     .option {
       margin-right: 10px;
       font-size: 24px;
-      color: rgb(0, 101, 255);
+      color: #0082bc;
       cursor: pointer;
 
       &.disable {
@@ -675,60 +686,60 @@
     }
   }
 
-  .el-pagination ::v-deep {
-    margin-top: 30px;
-    text-align: right;
-    height: 24px;
-    .el-pagination__sizes {
-      margin-right: 0;
-    }
+  // .el-pagination ::v-deep {
+  //   margin-top: 30px;
+  //   text-align: right;
+  //   height: 24px;
+  //   .el-pagination__sizes {
+  //     margin-right: 0;
+  //   }
 
-    button {
-      margin: 0;
-      background-color: #fff;
-      border: 1px solid #c0c5cc;
-      border-radius: 2px;
-    }
+  //   button {
+  //     margin: 0;
+  //     // background-color: #fff;
+  //     border: 1px solid #c0c5cc;
+  //     border-radius: 2px;
+  //   }
 
-    .number {
-      background-color: #fff;
+  //   .number {
+  //     // background-color: #fff;
 
-      &:not(.disabled):hover {
-        color: #0065ff;
-      }
+  //     &:not(.disabled):hover {
+  //       color: #0065ff;
+  //     }
 
-      &:not(.disabled).active {
-        background-color: #0065ff;
-        color: #fff;
-      }
-    }
+  //     &:not(.disabled).active {
+  //       // background-color: #0065ff;
+  //       color: #fff;
+  //     }
+  //   }
 
-    .el-input .el-input__inner {
-      padding-left: 0;
+  //   .el-input .el-input__inner {
+  //     padding-left: 0;
 
-      &:hover,
-      &:focus {
-        border-color: #0065ff;
-      }
-    }
+  //     &:hover,
+  //     &:focus {
+  //       border-color: #0065ff;
+  //     }
+  //   }
 
-    .el-pagination__jump {
-      margin-left: 12px;
-      .el-pagination__editor {
-        width: 37px;
-        input {
-          width: 32px;
-        }
-      }
-    }
-  }
+  //   .el-pagination__jump {
+  //     margin-left: 12px;
+  //     .el-pagination__editor {
+  //       width: 37px;
+  //       input {
+  //         width: 32px;
+  //       }
+  //     }
+  //   }
+  // }
 }
 </style>
 
-<style >
+<style>
 .el-date-table td.start-date span,
 .el-date-table td.end-date span {
-  background-color: #0065ff;
+  /* background-color: #0065ff; */
 }
 
 .el-button--text span {
@@ -740,4 +751,4 @@
   color: #0065ff;
   border-color: #0065ff;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/equipmentManagement/equipmentList/components/InfoCard.vue b/src/views/equipmentManagement/equipmentList/components/InfoCard.vue
index 0e6582a..d3a205d 100644
--- a/src/views/equipmentManagement/equipmentList/components/InfoCard.vue
+++ b/src/views/equipmentManagement/equipmentList/components/InfoCard.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="InfoCard">
-    <span class="close iconfont" @click="close">&#xe60f;</span>
+    <div class="header">
+      <div class="name">{{ node.devName }}</div>
+      <div class="close" @click="close">
+        <span class="iconfont">&#xe60f;</span>
+      </div>
+    </div>
 
-    <div class="name">{{ node.devName }}</div>
     <div class="info">
       <div class="head">
         <div class="title">璁惧淇℃伅</div>
@@ -10,6 +14,7 @@
           鏌ョ湅璇︽儏 >
         </div>
       </div>
+      <div class="line"></div>
       <div class="item">
         <div class="label">璁惧鍨嬪彿:</div>
         <div class="data">{{ node.devMode }}</div>
@@ -25,7 +30,7 @@
         <div class="data">{{ node.channelCount }}</div>
       </div>
 
-      <div class="item">
+      <div class="item" style="margin-bottom: 0px;">
         <div class="label">鍐呭瓨:</div>
         <div class="data">{{ node.mem }}</div>
       </div>
@@ -35,12 +40,16 @@
       <div class="head">
         <div class="title">绯荤粺鎬ц兘</div>
       </div>
+
+      <div class="line"></div>
+
       <div class="propertyList" v-if="devicePerformance.length > 0">
         <div class="property">
           <el-progress
             type="circle"
             :percentage="devicePerformance[0].data"
-            :stroke-width="25"
+            :stroke-width="10"
+            width="45"
             color="#0065FF"
           ></el-progress>
           <div class="num">{{ devicePerformance[0].data }}%</div>
@@ -51,7 +60,8 @@
           <el-progress
             type="circle"
             :percentage="devicePerformance[1].data"
-            :stroke-width="25"
+            :stroke-width="10"
+            width="45"
             color="rgb(64, 182, 58)"
           ></el-progress>
           <div class="num">{{ devicePerformance[1].data }}%</div>
@@ -62,7 +72,8 @@
           <el-progress
             type="circle"
             :percentage="devicePerformance[2].data"
-            :stroke-width="25"
+            :stroke-width="10"
+            width="45"
             color="rgb(255, 186, 74)"
           ></el-progress>
           <div class="num">{{ devicePerformance[2].data }}%</div>
@@ -73,7 +84,8 @@
           <el-progress
             type="circle"
             :percentage="devicePerformance[3].data"
-            :stroke-width="25"
+            :stroke-width="10"
+            width="45"
             color="rgb(197, 35, 223)"
           ></el-progress>
           <div class="num">{{ devicePerformance[3].data }}%</div>
@@ -89,13 +101,13 @@
           鏌ョ湅璇︽儏 >
         </div>
       </div>
-
+      <div class="line"></div>
       <div class="item">
         <div class="label">绠楁硶鏁伴噺:</div>
         <div class="data">{{ algAll }}</div>
       </div>
 
-      <div class="item">
+      <div class="item" style="margin-bottom: 0px;">
         <div class="label">寰呭崌绾х畻娉曟暟閲�:</div>
         <div class="data">{{ algUpgrade }}</div>
       </div>
@@ -104,202 +116,299 @@
 </template>
 
 <script>
-import { findAllSdk, showSystemStates } from "@/api/device";
+import { findAllSdk, showSystemStates } from "@/api/device"
 export default {
   props: {
     node: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   created() {
-    this.getAlg();
-    this.getDevicePerformance();
+    this.getAlg()
+    this.getDevicePerformance()
   },
   data() {
     return {
       algAll: 0, //鎵�鏈夌畻娉�
       algUpgrade: 0, //寰呭崌绾х殑绠楁硶
-      devicePerformance: [], //绯荤粺鎬ц兘
-    };
+      devicePerformance: [] //绯荤粺鎬ц兘
+    }
   },
   methods: {
     //鑾峰彇绠楁硶淇℃伅
     async getAlg() {
-      const res = await findAllSdk({ userId: "", nodeId: this.node.devId });
+      const res = await findAllSdk({ userId: "", nodeId: this.node.devId })
 
       res.data.forEach((item) => {
         //璁＄畻绠楁硶鎬绘暟
         if (item.installed) {
-          this.algAll++;
+          this.algAll++
         }
         //璁＄畻寰呭崌绾х畻娉�
         if (item.installed && item.isUpgrade) {
-          this.algUpgrade++;
+          this.algUpgrade++
         }
-      });
+      })
     },
     //鑾峰彇璁惧鎬ц兘
     async getDevicePerformance() {
       const res = await showSystemStates({
         userId: "",
-        nodeId: this.node.devId,
-      });
+        nodeId: this.node.devId
+      })
       this.devicePerformance.push({
         data: +res.data.mem.usedPercent.toString().split(".")[0],
         name: "鍐呭瓨",
-        type: "mem",
-      });
+        type: "mem"
+      })
       this.devicePerformance.push({
         data: +res.data.gpu.toString().split(".")[0],
         name: "绠楀姏",
-        type: "gpu",
-      });
+        type: "gpu"
+      })
       this.devicePerformance.push({
         data: +res.data.cpu.toString().split(".")[0],
         name: "cpu",
-        type: "cpu",
-      });
+        type: "cpu"
+      })
 
-      let distData = 0;
+      let distData = 0
 
       res.data.disk.forEach((item) => {
-        let distItem = +item.info.usedPercent.toString().split(".")[0];
-        distData = distData + distItem;
-      });
+        let distItem = +item.info.usedPercent.toString().split(".")[0]
+        distData = distData + distItem
+      })
 
       this.devicePerformance.push({
         data: distData,
         name: `纭洏`,
-        type: "dist",
-      });
+        type: "dist"
+      })
 
-      console.log(this.devicePerformance);
+      console.log(this.devicePerformance)
     },
     //鍏抽棴
     close() {
-      this.$emit("close");
+      this.$emit("close")
     },
     // 璺宠浆璇︽儏椤�
     checkDetail(type) {
       this.$router.push({
         path: `/${type}`,
         query: {
-          id: this.node.devId,
-        },
-      });
-    },
-  },
-};
+          id: this.node.devId
+        }
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .InfoCard {
+  border-radius: 3px;
   box-sizing: border-box;
-  padding: 20px 20px 10px 20px;
+  padding: 10px;
   width: 270px;
   height: 488px;
   background-color: #fff;
-  filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
-
-  .name {
-    font-weight: bold;
-    font-size: 18px;
+  // background-color: red;
+  // filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .name {
+      font-family: PingFangSC-Bold;
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 24px;
+      letter-spacing: 0px;
+      color: #3d3d3d;
+    }
+    .close {
+      width: 16px;
+      height: 16px;
+    }
   }
-
   .info {
-    position: relative;
-    box-sizing: border-box;
-    padding: 10px;
-    margin-top: 10px;
-    background: rgba(233, 235, 238, 0.4);
-    font-size: 14px;
-
+    border-radius: 3px;
+    opacity: 0.75;
+    background: #f3f3f3;
+    padding: 10px 16px 8px;
+    margin-bottom: 10px;
     .head {
       display: flex;
       justify-content: space-between;
-
+      margin-bottom: 8px;
       .title {
-        font-weight: bold;
+        font-family: PingFangSC-Bold;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 22px;
+        display: flex;
+        align-items: center;
+        letter-spacing: 0px;
         color: #666666;
       }
-
       .link {
+        font-family: PingFang SC Regular;
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 22px;
+        letter-spacing: 0px;
         color: #0065ff;
-        cursor: pointer;
-
-        &:hover {
-          color: #0033ff;
-        }
       }
     }
-
     .item {
       display: flex;
       justify-content: space-between;
-      margin-top: 10px;
-
+      margin-bottom: 8px;
       .label {
+        font-family: PingFang SC Regular;
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 20px;
+        letter-spacing: 0px;
         color: #999999;
       }
+      .data {
+        font-family: PingFangSC-Bold;
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 20px;
+        text-align: right;
+        letter-spacing: 0px;
+        color: #666666;
+      }
     }
-
     .propertyList {
       display: flex;
-      margin-top: 10px;
-      margin-bottom: 4px;
-      width: 100%;
-
+      justify-content: space-between;
       .property {
-        flex: 1;
-        text-align: center;
-
-        .el-progress ::v-deep {
-          .el-progress-circle,
-          svg {
-            height: 45px !important;
-            width: 45px !important;
-          }
-
-          .el-progress__text {
-            display: none;
-          }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .num {
+          margin: 6px 0 1px;
+          font-family: PingFangSC-Bold;
+          font-size: 14px;
+          font-weight: normal;
+          line-height: 22px;
+          letter-spacing: 0px;
+          color: #666666;
         }
-
         .des {
-          color: #666;
+          font-family: PingFang SC Regular;
           font-size: 12px;
-        }
-
-        &:nth-child(1) ::v-deep .el-progress-circle__track {
-          stroke: rgb(212, 227, 250);
-        }
-
-        &:nth-child(2) ::v-deep .el-progress-circle__track {
-          stroke: rgb(196, 242, 194);
-        }
-
-        &:nth-child(3) ::v-deep .el-progress-circle__track {
-          stroke: rgb(250, 231, 200);
-        }
-
-        &:nth-child(4) ::v-deep .el-progress-circle__track {
-          stroke: rgb(241, 215, 245);
+          font-weight: normal;
+          line-height: 20px;
+          letter-spacing: 0px;
+          color: #666666;
         }
       }
     }
-
-    &.propertyInfo {
-      height: 137px;
-    }
   }
 
-  .close {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    font-size: 12px;
-    color: rgb(187, 187, 187);
-    cursor: pointer;
+  // .info {
+  //   position: relative;
+  //   box-sizing: border-box;
+  //   padding: 10px;
+  //   margin-top: 10px;
+  //   background: rgba(233, 235, 238, 0.4);
+  //   font-size: 14px;
+
+  //   .head {
+  //     display: flex;
+  //     justify-content: space-between;
+
+  //     .title {
+  //       font-weight: bold;
+  //       color: #666666;
+  //     }
+
+  //     .link {
+  //       color: #0065ff;
+  //       cursor: pointer;
+
+  //       &:hover {
+  //         color: #0033ff;
+  //       }
+  //     }
+  //   }
+
+  //   .item {
+  //     display: flex;
+  //     justify-content: space-between;
+  //     margin-top: 10px;
+
+  //     .label {
+  //       color: #999999;
+  //     }
+  //   }
+
+  //   .propertyList {
+  //     display: flex;
+  //     margin-top: 10px;
+  //     margin-bottom: 4px;
+  //     width: 100%;
+
+  //     .property {
+  //       flex: 1;
+  //       text-align: center;
+
+  //       .el-progress ::v-deep {
+  //         .el-progress-circle,
+  //         svg {
+  //           height: 45px !important;
+  //           width: 45px !important;
+  //         }
+
+  //         .el-progress__text {
+  //           display: none;
+  //         }
+  //       }
+
+  //       .des {
+  //         color: #666;
+  //         font-size: 12px;
+  //       }
+
+  //       &:nth-child(1) ::v-deep .el-progress-circle__track {
+  //         stroke: rgb(212, 227, 250);
+  //       }
+
+  //       &:nth-child(2) ::v-deep .el-progress-circle__track {
+  //         stroke: rgb(196, 242, 194);
+  //       }
+
+  //       &:nth-child(3) ::v-deep .el-progress-circle__track {
+  //         stroke: rgb(250, 231, 200);
+  //       }
+
+  //       &:nth-child(4) ::v-deep .el-progress-circle__track {
+  //         stroke: rgb(241, 215, 245);
+  //       }
+  //     }
+  //   }
+
+  //   &.propertyInfo {
+  //     height: 137px;
+  //   }
+  // }
+
+  // .close {
+  //   position: absolute;
+  //   top: 16px;
+  //   right: 16px;
+  //   font-size: 12px;
+  //   color: rgb(187, 187, 187);
+  //   cursor: pointer;
+  // }
+  .line {
+    height: 0;
+    border: 1px solid #e4e3e8;
+    margin-bottom: 8px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/equipmentManagement/equipmentList/index.vue b/src/views/equipmentManagement/equipmentList/index.vue
index cbe38fc..94d3a99 100644
--- a/src/views/equipmentManagement/equipmentList/index.vue
+++ b/src/views/equipmentManagement/equipmentList/index.vue
@@ -3,48 +3,71 @@
     <!-- 椤靛ご -->
     <IndexHeader :opacity="false"></IndexHeader>
     <!-- 闈㈠寘灞� -->
-    <div class="heart">
+    <!-- <div class="breadcrumb">
       <el-breadcrumb separator=">">
-        <el-breadcrumb-item :to="{ path: '/manageCenter' }"
-          >绠＄悊涓績</el-breadcrumb-item
-        >
+        <el-breadcrumb-item :to="{ path: '/manageCenter' }">绠＄悊涓績</el-breadcrumb-item>
         <el-breadcrumb-item>璁惧绠＄悊</el-breadcrumb-item>
       </el-breadcrumb>
+    </div> -->
+    <div class="breadcrumb">
+      <div style="font-family: PingFang SC Regular;" @click="$router.push('/manageCenter')">绠＄悊涓績 ></div>
+      <div style="font-family: PingFang SC Bold;">璁惧绠＄悊</div>
     </div>
 
     <!-- 涓昏鍐呭 -->
     <Content></Content>
 
     <!-- 椤靛熬 -->
-    <Footer :isBlack="true"></Footer>
+    <!-- <Footer :isBlack="true"></Footer> -->
   </div>
 </template>
 
 <script>
-import IndexHeader from "@/components/IndexHeader";
-import Content from "@/views/equipmentManagement/equipmentList/components/Content";
-import Footer from "@/components/Footer";
+import IndexHeader from "@/components/IndexHeader"
+import Content from "@/views/equipmentManagement/equipmentList/components/Content"
+import Footer from "@/components/Footer"
 
 export default {
   components: {
     IndexHeader,
-    Content,
-    Footer,
-  },
-};
+    Content
+    // Footer
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .equipmentList {
-  background-color: rgb(243, 245, 248);
+  background-color: #34405a;
+  padding-bottom: 24px;
+  .breadcrumb {
+    padding: 24px 0;
+    width: 1280px;
+    // background-color: #34405a;
+    margin: 0 auto;
+    display: flex;
+    justify-content: flex-start;
 
-  .el-breadcrumb {
-    margin-top: 48px;
-    margin-bottom: 24px;
-
-    ::v-deep span {
-      color: #666;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 22px;
+    letter-spacing: 0px;
+    color: #ffffff;
+    div {
+      margin-right: 8px;
     }
   }
+  // background-color: #34405a;
+  // .breadcrumb {
+  //   height: 10px;
+  // }
+  // .el-breadcrumb {
+  //   margin-top: 48px;
+  //   margin-bottom: 24px;
+
+  //   ::v-deep span {
+  //     color: #666;
+  //   }
+  // }
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.8.0