地图问题修改 gengdidi

gassafety-web/src/components/PopWindow/lineInfoWindow.vue

@@ -179,7 +179,7 @@ export default {
         vertical-align: top;
         display: inline-block;
         word-break: break-all;
-        max-width: 280px;
+        max-width: 250px;
       }
     }
   }
@@ -213,4 +213,4 @@ export default {
   display: flex;
   justify-content: space-between;
 }
-</style>
\ No newline at end of file
+</style>

gassafety-web/src/components/PopWindow/markerInfoWindow.vue

@@ -8,28 +8,32 @@
       </div>
     </div>
     <!-- 设备信息 -->
-    <div class="eq-content display-default">
-      <div class="text-wrapper">
-        <div class="eq-text">设备名称：<span>{{data.deviceName}}</span></div>
-        <div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div>
-        <div class="eq-text">所属管道：<span>{{data.pipeCode}}</span></div>
-        <div class="eq-text">设备状态：<span>报警</span></div>
+    <div class="content">
+      <div class="eq-content display-default">
+        <div class="text-wrapper">
+          <div class="eq-text">设备名称：<span>{{data.deviceName}}</span></div>
+          <div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div>
+          <div class="eq-text">所属管道：<span>{{data.pipeCode}}</span></div>
+          <div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div>
+        </div>
+        <div class="pic">
+          <img v-bind:src="data.iconUrl" alt="" />
+        </div>
       </div>
-      <div class="pic">
-        <img v-bind:src="data.iconUrl" alt="" />
+      <!-- 维修人员 -->
+      <div class="maintain-content">
+        <div>管道所在地址：<span>{{data.deviceAddr}}</span></div>
+        <div>安装日期：<span>{{data.installationTime}}</span></div>
+        <div>最后巡检日期：<span></span></div>
+        <div>备注信息：<span>{{data.remarks}}</span></div>
       </div>
+      <!-- 报警状态 -->
+      <!--<div class="warn-content">
+        <div>报警状态 <span>报警</span></div>
+        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+      </div>-->
     </div>
-    <!-- 维修人员 -->
-    <div class="maintain-content">
-      <div>姓名： <span>{{data.linkman}}</span></div>
-      <div>电话： <span>{{data.phone}}</span></div>
-      <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
-    </div>
-    <!-- 报警状态 -->
-    <div class="warn-content">
-      <div>报警状态 <span>报警</span></div>
-      <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
-    </div>
+
   </div>
 </template>
 
@@ -48,7 +52,6 @@ export default {
 <style lang="scss" scoped>
 .wrapper {
   width: 406px;
-  height: 488px;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
@@ -76,7 +79,6 @@ export default {
     height: 156px;
     box-sizing: border-box;
     padding: 13px 16px 13px 22px;
-    border-bottom: 1px solid #e2e2e2;
     .text-wrapper {
       padding-top: 1px;
       & > div {
@@ -106,11 +108,16 @@ export default {
     padding-left: 22px;
     padding-top: 16px;
     box-sizing: border-box;
-    border-bottom: 1px solid #e2e2e2;
     & > div {
       margin-bottom: 8px;
       font-size: 14px;
       font-weight: 400;
+      span {
+        vertical-align: top;
+        display: inline-block;
+        word-break: break-all;
+        max-width: 250px;
+      }
     }
   }
 
@@ -192,4 +199,46 @@ export default {
 }
 
 
+.content {
+  max-height: 480px;
+  overflow: hidden;
+  overflow-y: auto;
+  .eq-content {
+    min-height: 156px;
+    box-sizing: border-box;
+    padding: 13px 22px 0px 22px;
+    // border-bottom: 1px solid #e2e2e2;
+    .text-wrapper {
+      padding-top: 1px;
+      & > div {
+        margin-bottom: 6px;
+      }
+      .eq-text {
+        font-size: 14px;
+        font-weight: 400;
+        color: #1d1d1d;
+        opacity: 1;
+        & > span {
+          vertical-align: top;
+          display: inline-block;
+          // white-space: nowrap;
+          // text-overflow: ellipsis;
+          // overflow: hidden;
+          word-break: break-all;
+          max-width: 88px;
+        }
+      }
+    }
+    .pic {
+      width: 177px;
+      height: 129px;
+      // background-color: black;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
 </style>

gassafety-web/src/utils/gaodeMap.js

@@ -142,6 +142,17 @@ class gaodeMap {
       offset: new AMap.Pixel(24, -38),
       anchor: "left-top"
     });
+    infoWindow.on("mouseover",function () {
+      let options = map.getStatus();
+      options.scrollWheel = false;
+      map.setStatus(options);
+    });
+    infoWindow.on("mouseout",function () {
+      let options = map.getStatus();
+      options.scrollWheel = true;
+      map.setStatus(options);
+    });
+    that.markerInfoWindow = infoWindow;
     let marker = new AMap.Marker({
       position: [data.longitude, data.latitude],
       map: map,
@@ -181,7 +192,7 @@ class gaodeMap {
                 message: "已取消删除"
               });
             });
-        } else {
+        } /*else {
           //map.setZoomAndCenter(13, e.target.getPosition());
           let infoWindow = new AMap.InfoWindow({
             isCustom: true,
@@ -190,7 +201,7 @@ class gaodeMap {
           });
           infoWindow.setContent(e.target.content);
           infoWindow.open(map, e.target.getPosition());
-        }
+        }*/
       });
       marker.on("dragend", function(e) {
         editWindow.form.longitude = e.lnglat.lng;
@@ -203,12 +214,19 @@ class gaodeMap {
     //map.setFitView();
 
     function infoClose(e) {
-      infoWindow.close(map, e.target.getPosition());
+      let options = map.getStatus();
+      options.scrollWheel = true;
+      map.setStatus(options);
+      //infoWindow.close(map, e.target.getPosition());
     }
 
     function infoOpen(e) {
+      let options = map.getStatus();
+      options.scrollWheel = false;
+      map.setStatus(options);
       infoWindow.setContent(e.target.content);
       infoWindow.open(map, e.target.getPosition());
+
     }
   }
 
@@ -692,6 +710,14 @@ class gaodeMap {
 
           device.show();
         });
+        e.obj.on("mouseover",function () {
+          that.mouseTool.close();
+        });
+
+        e.obj.on("mouseout",function () {
+          that.draw(that.deviceType);
+        })
+
         that.markerOverlays.push(e.obj);
       }