diff --git "a/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png" "b/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png"
new file mode 100644
index 0000000..333f04e
--- /dev/null
+++ "b/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png"
Binary files differ

diff --git "a/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png" "b/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png"
new file mode 100644
index 0000000..333f04e
--- /dev/null
+++ "b/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png"
Binary files differ
diff --git a/src/components/guadMap/circle.vue b/src/components/guadMap/circle.vue
index 5953d4d..983eb02 100644
--- a/src/components/guadMap/circle.vue
+++ b/src/components/guadMap/circle.vue
@@ -8,7 +8,7 @@
 
 <script>
 export default {
-      name:'circle'
+      name:'iconCircle'
 };
 </script>
 

diff --git "a/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png" "b/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png"
new file mode 100644
index 0000000..333f04e
--- /dev/null
+++ "b/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png"
Binary files differ
diff --git a/src/components/guadMap/circle.vue b/src/components/guadMap/circle.vue
index 5953d4d..983eb02 100644
--- a/src/components/guadMap/circle.vue
+++ b/src/components/guadMap/circle.vue
@@ -8,7 +8,7 @@
 
 <script>
 export default {
-      name:'circle'
+      name:'iconCircle'
 };
 </script>
 
diff --git a/src/components/guadMap/deviceDetail.vue b/src/components/guadMap/deviceDetail.vue
new file mode 100644
index 0000000..2d6c0ad
--- /dev/null
+++ b/src/components/guadMap/deviceDetail.vue
@@ -0,0 +1,71 @@
+<!-- 设备详情弹窗 -->
+<template>
+    <div class="container">
+        <div class="title">
+            <div class="text">设备详情</div>
+            <div class="close" @click="close">x</div>
+        </div>
+        <div class="item">设备名称 : {{ device.deviceName }}</div>
+        <div class="item">设备信息 : {{ device.produceCode }}</div>
+        <div class="item">设备ID : {{ device.deviceId }}</div>
+        <div class="item">IP地址 : {{ device.deviceIp }}</div>
+        <div class="item">地址 : {{ device.deviceAddress }}</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'detailDevice',
+    data() {
+    return {
+      overlay: null,
+      infoWindow: null,
+      device:{}
+    }
+  },
+  methods:{
+    // 初始化
+    initialize(e) {
+      this.overlay = e.overlay;
+      this.infoWindow = e.infoWindow;
+      this.device = e.device
+    },
+    //关闭
+    close() {
+      this.infoWindow.close();
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 340px;
+    height: 194px;
+    padding: 10px;
+    background-image: url("../../assets/kitchen/地图详情背景.png");
+
+    .title {
+        font-size: 16px;
+        font-weight: 700;
+        padding: 0 10px;
+        display: flex;
+        justify-content: space-between;
+
+        .close {
+            color: #ccc;
+            &:hover{
+                cursor: pointer;
+            }
+        }
+    }
+
+    .item {
+        padding: 0 5px;
+        color: #111213;
+        font-size: 14px;
+        margin: 10px;
+        border-bottom: 1px solid #ccc;
+    }
+}
+</style>
\ No newline at end of file

diff --git "a/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png" "b/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png"
new file mode 100644
index 0000000..333f04e
--- /dev/null
+++ "b/src/assets/kitchen/\345\234\260\345\233\276\350\257\246\346\203\205\350\203\214\346\231\257.png"
Binary files differ
diff --git a/src/components/guadMap/circle.vue b/src/components/guadMap/circle.vue
index 5953d4d..983eb02 100644
--- a/src/components/guadMap/circle.vue
+++ b/src/components/guadMap/circle.vue
@@ -8,7 +8,7 @@
 
 <script>
 export default {
-      name:'circle'
+      name:'iconCircle'
 };
 </script>
 
diff --git a/src/components/guadMap/deviceDetail.vue b/src/components/guadMap/deviceDetail.vue
new file mode 100644
index 0000000..2d6c0ad
--- /dev/null
+++ b/src/components/guadMap/deviceDetail.vue
@@ -0,0 +1,71 @@
+<!-- 设备详情弹窗 -->
+<template>
+    <div class="container">
+        <div class="title">
+            <div class="text">设备详情</div>
+            <div class="close" @click="close">x</div>
+        </div>
+        <div class="item">设备名称 : {{ device.deviceName }}</div>
+        <div class="item">设备信息 : {{ device.produceCode }}</div>
+        <div class="item">设备ID : {{ device.deviceId }}</div>
+        <div class="item">IP地址 : {{ device.deviceIp }}</div>
+        <div class="item">地址 : {{ device.deviceAddress }}</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'detailDevice',
+    data() {
+    return {
+      overlay: null,
+      infoWindow: null,
+      device:{}
+    }
+  },
+  methods:{
+    // 初始化
+    initialize(e) {
+      this.overlay = e.overlay;
+      this.infoWindow = e.infoWindow;
+      this.device = e.device
+    },
+    //关闭
+    close() {
+      this.infoWindow.close();
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 340px;
+    height: 194px;
+    padding: 10px;
+    background-image: url("../../assets/kitchen/地图详情背景.png");
+
+    .title {
+        font-size: 16px;
+        font-weight: 700;
+        padding: 0 10px;
+        display: flex;
+        justify-content: space-between;
+
+        .close {
+            color: #ccc;
+            &:hover{
+                cursor: pointer;
+            }
+        }
+    }
+
+    .item {
+        padding: 0 5px;
+        color: #111213;
+        font-size: 14px;
+        margin: 10px;
+        border-bottom: 1px solid #ccc;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/guadMap/index.vue b/src/components/guadMap/index.vue
index e921346..bb52c00 100644
--- a/src/components/guadMap/index.vue
+++ b/src/components/guadMap/index.vue
@@ -1,19 +1,21 @@
 <template>
   <div>
     <div id="map"></div>
+    <detail ref="windowInfo" />
+    <!-- <iconCircle ref="icon"/> -->
   </div>
 </template>
  
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
 import baseConfig from "../../../public/config/project.config.json";
-import circle from "./circle.vue";
+// import iconCircle from "./circle.vue";
+import detail from './deviceDetail.vue'
+import { getDevicePosition } from "@/api/cockpit/cockpit";
 // 设置安全密钥
 window._AMapSecurityConfig = {
   securityJsCode: "56bf9671d4b3517d294caec4751889a1", // 后期需替换
 };
-// import circle from "./circle.vue";
-import { getDevicePosition } from "@/api/cockpit/cockpit";
 export default {
   data() {
     return {
@@ -23,7 +25,8 @@
     };
   },
   components: {
-    // circle,
+    detail,
+    // iconCircle
   },
   methods: {
     // 初始化地图
@@ -60,31 +63,34 @@
       // 循环所有的标记点
       for (let i = 0; i < this.deviceList.length; i++) {
         if (this.deviceList[i].lon && this.deviceList[i].lat) {
-          var marker = new AMap.Marker({
+          let content = '<div class="circle-container"><div class="circle-one"></div><div class="circle-two"></div><div class="circle-three"></div><div class="circle-four"></div></div>'
+          let marker = new AMap.Marker({
             position: [
               Number(this.deviceList[i].lon),
               Number(this.deviceList[i].lat),
             ], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
             map: this.map,
             title: this.deviceList[i].deviceName,
-            content:
-              '<div class="circle-container"><div class="circle-one"></div><div class="circle-three"></div><div class="circle-two"></div><div class="circle-four"></div></div>',
+            content:content,
             offset: new AMap.Pixel(0, 0),
           });
 
           // 信息窗体
-          let info = [];
-          info.push("<div style=\"text-align:left;border-bottom:1px solid #ccc;\"><h4>设备信息</h4>");
-          info.push(`<p  style=\"border-bottom:1px solid #ccc;\">设备名称 : ${this.deviceList[i].deviceName}`);
-          info.push(`<p  style=\"border-bottom:1px solid #ccc;\">设备详情 : ${this.deviceList[i].productCode}`);
-          info.push(`<p class='input-item' style=\"border-bottom:1px solid #ccc\">ip地址 : ${this.deviceList[i].deviceIp}  Mac地址 : ${this.deviceList[i].deviceMac}`);
-          info.push(`<p  style=\"border-bottom:1px solid #ccc;\">地址 : ${this.deviceList[i].deviceAddress}`); 
-          let infoWindow = new AMap.InfoWindow({
-            content: info.join("")  //使用默认信息窗体框样式，显示信息内容
+          this.infoWindow = new AMap.InfoWindow({
+            isCustom: true, // 自定义信息窗体
+            content: this.$refs.windowInfo.$el, //窗体内容(vue组件)
+            offset: new AMap.Pixel(9, -5) // 偏移
           });
 
           marker.on("click", (e) => {
-            infoWindow.open(this.map, e.target.getPosition());
+            // 打开信息窗口
+            this.infoWindow.open(this.map, e.lnglat);
+            // 初始化信息窗口
+            this.$refs.windowInfo.initialize({
+              overlay: e.target,
+              infoWindow: this.infoWindow,
+              device: this.deviceList[i]
+            });
           });
           // 将创建的点标记添加到已有的地图实例：
           this.map.add([marker]);
@@ -153,8 +159,8 @@
   display: none !important;
 }
 </style>
-<style lang="scss" scoped>
-circle-container {
+<style lang="scss" >
+.circle-container {
   position: absolute;
   width: 30px;
   height: 30px;
@@ -167,7 +173,7 @@
   width: 0px;
   height: 0px;
   background-color: transparent;
-  border: 3px solid rgb(181, 211, 247);
+  border: 4px solid rgb(46, 130, 232);
   border-radius: 50%;
   position: absolute;
   left: 50%;
@@ -180,15 +186,15 @@
 }
 
 .circle-two {
-  animation: transition-circle 2s infinite 0.7s;
+  animation: transition-circle 2s infinite 1s;
 }
 
 .circle-three {
-  animation: transition-circle 2s infinite 1.4s;
+  animation: transition-circle 2s infinite 1.5s;
 }
 
 .circle-three {
-  animation: transition-circle 2s infinite 1.8s;
+  animation: transition-circle 2s infinite 2.5s;
 }
 
 @keyframes transition-circle {
@@ -198,12 +204,6 @@
     opacity: 1;
   }
 
-  50% {
-    width: 30px;
-    height: 30px;
-    opacity: 0.5;
-  }
-
   100% {
     width: 35px;
     height: 35px;