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

---
 src/views/equipmentManagement/equipmentList/components/Content.vue |  260 +++++++++++++++++++++++++++-------------------------
 1 files changed, 135 insertions(+), 125 deletions(-)

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>

--
Gitblit v1.8.0