Merge branch 'develop_jzl'

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

@@ -36,22 +36,40 @@
         </div>
 
         <div class="pic">
-          <img :src="obj.iconUrl" alt="" />
+          <img @mousedown.stop="mousedown" :src="obj.iconUrl" alt="" />
+          <el-image
+            v-show="false"
+            id="img"
+            ref="previewImg"
+            :src="obj.iconUrl"
+            :preview-src-list="bigImageArr"
+            :z-index="9999999"
+          ></el-image>
         </div>
       </div>
 
       <div class="maintain-content">
-        <div>
-          <span>管道所在地址：</span>
-          <span>{{ obj.pipeAddr }}</span>
-        </div>
+        <el-col :span="11">
           <div>
             <span>安装日期：</span>
             <span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
           </div>
+        </el-col>
+
+        <el-col :span="13">
           <div>
             <span>最后巡检日期：</span>
-          <span>{{ obj.inspectionTime }}</span>
+            <span>{{
+              obj.inspectionTime
+                ? obj.inspectionTime
+                : "-"
+            }}</span>
+          </div>
+        </el-col>
+
+        <div>
+          <span>管道所在地址：</span>
+          <span>{{ obj.pipeAddr }}</span>
         </div>
         <div>
           <span>备注信息：</span>
@@ -83,8 +101,30 @@ export default {
   created() {
     console.log("created", this.obj);
   },
+  mounted() {},
+  computed: {
+    bigImageArr() {
+      return [this.obj.iconUrl];
+    },
+  },
   methods: {
     moment,
+    mousedown(e) {
+      return;
+      // console.log(this.$refs.previewImg)
+      this.$refs.previewImg.showViewer = true;
+      console.log(this.$refs.previewImg.showViewer);
+      // 加载出来的dom给个事件阻止冒泡
+      setTimeout(() => {
+        const dom = document.getElementsByClassName(
+          "el-image-viewer__wrapper"
+        )[0];
+        dom.addEventListener("mousedown", (e) => {
+          e.stopPropagation();
+          console.log("?");
+        });
+      });
+    },
     close() {
       this.obj.polyline.infoWindow.close();
     },
@@ -115,7 +155,7 @@ export default {
     }
     .right {
       padding-right: 22px;
-      img{
+      img {
         cursor: pointer;
       }
     }
@@ -126,7 +166,7 @@ export default {
     overflow: hidden;
     overflow-y: auto;
     .eq-content {
-      min-height: 156px;
+      // min-height: 156px;
       box-sizing: border-box;
       padding: 13px 22px 0px 22px;
       // border-bottom: 1px solid #e2e2e2;
@@ -152,12 +192,13 @@ export default {
         }
       }
       .pic {
-        width: 177px;
-        height: 129px;
+        width: 180px;
+        height: 103px;
         // background-color: black;
         img {
           width: 100%;
           height: 100%;
+          // cursor: pointer;
         }
       }
     }
@@ -165,9 +206,9 @@ export default {
 
   .maintain-content {
     width: 100%;
-    height: 119px;
+    max-height: 119px;
     padding-left: 22px;
-    padding-right: 22px;
+    // padding-right: 22px;
     padding-bottom: 10px;
     // padding-top: 16px;
     box-sizing: border-box;
@@ -180,7 +221,7 @@ export default {
         vertical-align: top;
         display: inline-block;
         word-break: break-all;
-        max-width: 250px;
+        max-width: 280px;
       }
     }
   }

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

@@ -22,10 +22,32 @@
       </div>
       <!-- 维修人员 -->
        <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>
+        <el-col :span="11">
+          <div>
+            <span>安装日期：</span>
+            <span>{{ moment(data.installationTime).format("YYYY-MM-DD") }}</span>
+          </div>
+        </el-col>
+
+        <el-col :span="13">
+          <div>
+            <span>最后巡检日期：</span>
+            <span>{{
+              data.inspectionTime
+                ? data.inspectionTime
+                : "-"
+            }}</span>
+          </div>
+        </el-col>
+
+        <div>
+          <span>管道所在地址：</span>
+          <span>{{ data.pipeAddr }}</span>
+        </div>
+        <div>
+          <span>备注信息：</span>
+          <span>{{ data.remarks }} </span>
+        </div>
       </div>
       <!-- 报警状态 -->
       <!--<div class="warn-content">
@@ -38,6 +60,7 @@
 </template>
 
 <script>
+import moment from "moment"
 //line移入时的的infowindow
 export default {
   props: {
@@ -45,21 +68,26 @@ export default {
     title: "",
     data: {},
     map: null
+  },
+  methods:{
+    moment,
   }
+
 };
 </script>
 
 <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);
-  overflow: hidden;
+  // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
-    background-color: #053B6A;
+    background-color: #053b6a;
     .text {
       font-weight: 600;
       font-size: 16px;
@@ -70,15 +98,22 @@ export default {
       padding-left: 22px;
     }
     .right {
-      padding-right: 16px;
+      padding-right: 22px;
+      img {
         cursor: pointer;
       }
     }
-
+  }
+  .content {
+    position: relative;
+    max-height: 400px;
+    overflow: hidden;
+    overflow-y: auto;
     .eq-content {
-    height: 156px;
+      // min-height: 156px;
       box-sizing: border-box;
-    padding: 13px 16px 13px 22px;
+      padding: 13px 22px 0px 22px;
+      // border-bottom: 1px solid #e2e2e2;
       .text-wrapper {
         padding-top: 1px;
         & > div {
@@ -89,25 +124,39 @@ export default {
           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: 100px;
+          }
         }
       }
       .pic {
-      width: 177px;
-      height: 129px;
+        width: 180px;
+        height: 103px;
         // background-color: black;
         img {
           width: 100%;
           height: 100%;
+          // cursor: pointer;
+        }
       }
     }
   }
 
   .maintain-content {
     width: 100%;
-    height: 130px;
+    max-height: 119px;
     padding-left: 22px;
-    padding-top: 16px;
+    // padding-right: 22px;
+    padding-bottom: 10px;
+    // padding-top: 16px;
     box-sizing: border-box;
+    // border-bottom: 1px solid #e2e2e2;
     & > div {
       margin-bottom: 8px;
       font-size: 14px;
@@ -116,7 +165,7 @@ export default {
         vertical-align: top;
         display: inline-block;
         word-break: break-all;
-        max-width: 250px;
+        max-width: 280px;
       }
     }
   }
@@ -143,102 +192,12 @@ export default {
     }
   }
 }
+
+.wrapperEditorPage {
+}
 .display-default {
   display: flex;
   justify-content: space-between;
 }
-.dot-top {
-  font-size: 0;
-  line-height: 0;
-  border-width: 10px;
-  border-color: #053B6A;
-  border-top-width: 0;
-  border-style: dashed;
-  border-bottom-style: solid;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-/* 向右的箭头 */
-.dot-right {
-  font-size: 0;
-  line-height: 0;
-  border-width: 10px;
-  border-color: #053B6A;
-  border-right-width: 0;
-  border-style: dashed;
-  border-left-style: solid;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-}
-/* 向下的箭头 */
-.dot-bottom {
-  font-size: 0;
-  line-height: 0;
-  border-width: 10px;
-  border-color: #053B6A;
-  border-bottom-width: 0;
-  border-style: dashed;
-  border-top-style: solid;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-/* 向左的箭头 */
-.dot-left {
-  position: absolute;
-  left: -12px;
-  top: 8px;
-  font-size: 0;
-  line-height: 0;
-  border-width: 13px;
-  border-color: #053B6A;
-  border-left-width: 0;
-  border-style: dashed;
-  border-right-style: solid;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-}
-
-
-.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/components/PopWindowGis/lineInfoWindow.vue

@@ -36,9 +36,9 @@
         </div>
 
         <div class="pic">
-          <!-- <img :src="obj.iconUrl" alt="" /> -->
+          <img @mousedown.stop="mousedown" :src="obj.iconUrl" alt="" />
           <el-image
-            @mouseover="mousedown"
+            v-show="false"
             id="img"
             ref="previewImg"
             :src="obj.iconUrl"
@@ -49,17 +49,27 @@
       </div>
 
       <div class="maintain-content">
-        <div>
-          <span>管道所在地址：</span>
-          <span>{{ obj.pipeAddr }}</span>
-        </div>
+        <el-col :span="11">
           <div>
             <span>安装日期：</span>
             <span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
           </div>
+        </el-col>
+
+        <el-col :span="13">
           <div>
             <span>最后巡检日期：</span>
-          <span>{{ obj.inspectionTime }}</span>
+            <span>{{
+              obj.inspectionTime
+                ? obj.inspectionTime
+                : "-"
+            }}</span>
+          </div>
+        </el-col>
+
+        <div>
+          <span>管道所在地址：</span>
+          <span>{{ obj.pipeAddr }}</span>
         </div>
         <div>
           <span>备注信息：</span>
@@ -91,34 +101,33 @@ export default {
   created() {
     console.log("created", this.obj);
   },
-  mounted() {
-    console.log("stopWindow");
-
-    this.$refs.previewImg.$el.addEventListener("mouseover", (e) => {
-      console.log("11", e);
-      // e.stopPropagation();
-      console.log("stopWindow");
-    });
-  },
+  mounted() {},
   computed: {
     bigImageArr() {
-      return [this.dialogImageUrl];
+      return [this.obj.iconUrl];
     },
   },
   methods: {
     moment,
-    mousedown() {
+    mousedown(e) {
+      return;
+      // console.log(this.$refs.previewImg)
+      this.$refs.previewImg.showViewer = true;
+      console.log(this.$refs.previewImg.showViewer);
+      // 加载出来的dom给个事件阻止冒泡
+      setTimeout(() => {
+        const dom = document.getElementsByClassName(
+          "el-image-viewer__wrapper"
+        )[0];
+        dom.addEventListener("mousedown", (e) => {
+          e.stopPropagation();
           console.log("?");
+        });
+      });
     },
     close() {
       this.obj.polyline.infoWindow.close();
     },
-    stopWindow() {
-      console.log("阻止window冒泡的图片");
-    },
-    stopw() {
-      console.log("stopwindow");
-    },
   },
 };
 </script>
@@ -157,7 +166,7 @@ export default {
     overflow: hidden;
     overflow-y: auto;
     .eq-content {
-      min-height: 156px;
+      // min-height: 156px;
       box-sizing: border-box;
       padding: 13px 22px 0px 22px;
       // border-bottom: 1px solid #e2e2e2;
@@ -183,12 +192,13 @@ export default {
         }
       }
       .pic {
-        width: 177px;
-        height: 129px;
+        width: 180px;
+        height: 103px;
         // background-color: black;
-        #img {
+        img {
           width: 100%;
           height: 100%;
+          // cursor: pointer;
         }
       }
     }
@@ -196,9 +206,9 @@ export default {
 
   .maintain-content {
     width: 100%;
-    height: 119px;
+    max-height: 119px;
     padding-left: 22px;
-    padding-right: 22px;
+    // padding-right: 22px;
     padding-bottom: 10px;
     // padding-top: 16px;
     box-sizing: border-box;
@@ -211,7 +221,7 @@ export default {
         vertical-align: top;
         display: inline-block;
         word-break: break-all;
-        max-width: 250px;
+        max-width: 280px;
       }
     }
   }

gassafety-web/src/components/PopWindowGis/lineInfoWindowWarn.vue

+<template>
+  <div class="wrapper">
+    <div class="top display-default">
+      <div class="left text">{{ obj.pipeName }}</div>
+      <div class="right text">
+        <img @click="close" src="../../assets/images/closeBtn.png" alt="" />
+      </div>
+    </div>
+
+    <!-- 报警设备信息 -->
+    <div class="content">
+      <div class="eq-content display-default">
+        <div class="text-wrapper">
+          <!-- <div :title="obj.pipeName" class="eq-text">
+          <span>管道名称：</span>
+          <span>{{ obj.pipeName }}</span>
+        </div> -->
+          <div class="eq-text">
+            <span>管道编号：</span>
+            <span>{{ obj.pipeCode }} </span>
+          </div>
+          <div class="eq-text">
+            <span>管道长度：</span>
+            <span>{{ `${obj.pipeLength ? obj.pipeLength + "米" : ""}` }}</span>
+          </div>
+          <div class="eq-text">
+            <span>管道类型：</span>
+            <span>{{ ["地埋管线", "地表管线"][obj.pipeType - 1] }}</span>
+          </div>
+          <div class="eq-text">
+            <span>管道压力：</span>
+            <span>{{
+              ["低压", "中压", "次高压", "高压"][obj.pipePressure - 1]
+            }}</span>
+          </div>
+        </div>
+
+        <div class="pic">
+          <img @mousedown.stop="mousedown" :src="obj.iconUrl" alt="" />
+          <el-image
+            v-show="false"
+            id="img"
+            ref="previewImg"
+            :src="obj.iconUrl"
+            :preview-src-list="bigImageArr"
+            :z-index="9999999"
+          ></el-image>
+        </div>
+      </div>
+
+      <div class="maintain-content">
+        <el-col :span="11">
+          <div>
+            <span>安装日期：</span>
+            <span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
+          </div>
+        </el-col>
+
+        <el-col :span="13">
+          <div>
+            <span>最后巡检日期：</span>
+            <span>{{ obj.inspectionTime ? obj.inspectionTime : "-" }}</span>
+          </div>
+        </el-col>
+
+        <div>
+          <span>管道所在地址：</span>
+          <span>{{ obj.pipeAddr }}</span>
+        </div>
+        <div style="padding: 0">
+          <span>备注信息：</span>
+          <span>{{ obj.remarks }} </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 报警状态 -->
+    <div class="warn-wrapper" v-if="true">
+      <div class="warn-content">
+        <div>报警状态：<span>报警</span></div>
+        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+      </div>
+      <div class="btn">
+        <el-button class="elbtn" type="primary">设备详情</el-button>
+        <el-button class="elbtn" type="primary">生成工单</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//line移入时的的infowindow
+import moment from "moment";
+export default {
+  props: {
+    obj: { typs: Object },
+  },
+  created() {
+    console.log("created", this.obj);
+  },
+  mounted() {},
+  computed: {
+    bigImageArr() {
+      return [this.obj.iconUrl];
+    },
+  },
+  methods: {
+    moment,
+    mousedown(e) {
+      return;
+      // console.log(this.$refs.previewImg)
+      this.$refs.previewImg.showViewer = true;
+      console.log(this.$refs.previewImg.showViewer);
+      // 加载出来的dom给个事件阻止冒泡
+      setTimeout(() => {
+        const dom = document.getElementsByClassName(
+          "el-image-viewer__wrapper"
+        )[0];
+        dom.addEventListener("mousedown", (e) => {
+          e.stopPropagation();
+          console.log("?");
+        });
+      });
+    },
+    close() {
+      this.obj.polyline.infoWindow.close();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 406px;
+  max-height: 430px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  overflow: hidden;
+  .top {
+    width: 100%;
+    height: 51px;
+    background-color: #FF5A67;
+    .text {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 51px;
+    }
+    .left {
+      padding-left: 22px;
+    }
+    .right {
+      padding-right: 22px;
+      img {
+        cursor: pointer;
+      }
+    }
+  }
+  .content {
+    position: relative;
+    max-height: 300px;
+    overflow: hidden;
+    overflow-y: auto;
+    padding-bottom: 2px;
+    border-bottom: 1px solid #eeeeee;
+    .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: 100px;
+          }
+        }
+      }
+      .pic {
+        width: 180px;
+        height: 103px;
+        // background-color: black;
+        img {
+          width: 100%;
+          height: 100%;
+          // cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .maintain-content {
+    width: 100%;
+    max-height: 119px;
+    padding-left: 22px;
+    // padding-right: 22px;
+    // padding-bottom: 10px;
+    // 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: 280px;
+      }
+    }
+  }
+  .warn-wrapper {
+    .warn-content {
+      box-sizing: border-box;
+      padding: 10px 0 2px 22px;
+      border-bottom: 1px solid #e2e2e2;
+      color:#FE5966;
+      & > div {
+        font-size: 14px;
+        font-weight: 400;
+        margin-bottom: 8px;
+      }
+    }
+    .btn {
+      padding: 16px 0;
+      text-align: center;
+      .elbtn {
+        background-color: #053b6a;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+        width: 95px;
+        height: 33px;
+      }
+    }
+  }
+}
+
+.wrapperEditorPage {
+}
+.display-default {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

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

+<template>
+  <div class="wrapper">
+    <span class="dot-left"></span>
+    <div class="top display-default">
+      <div class="left text">{{data.deviceName}}</div>
+      <div class="right text">
+        <img src="../../assets/images/closeBtn.png" alt="" @click="map.clearInfoWindow()"/>
+      </div>
+    </div>
+    <!-- 设备信息 -->
+    <div class="content">
+      <div class="eq-content display-default">
+        <div class="text-wrapper">
+          <div class="eq-text">设备类型：<span>{{title}}</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="maintain-content">
+        <el-col :span="11">
+          <div>
+            <span>安装日期：</span>
+            <span>{{ moment(data.installationTime).format("YYYY-MM-DD") }}</span>
+          </div>
+        </el-col>
+
+        <el-col :span="13">
+          <div>
+            <span>最后巡检日期：</span>
+            <span>{{
+              data.inspectionTime
+                ? data.inspectionTime
+                : "-"
+            }}</span>
+          </div>
+        </el-col>
+
+        <div>
+          <span>管道所在地址：</span>
+          <span>{{ data.pipeAddr }}</span>
+        </div>
+        <div>
+          <span>备注信息：</span>
+          <span>{{ data.remarks }} </span>
+        </div>
+      </div>
+      <!-- 报警状态 -->
+      <!--<div class="warn-content">
+        <div>报警状态 <span>报警</span></div>
+        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+      </div>-->
+    </div>
+
+  </div>
+</template>
+
+<script>
+import moment from "moment"
+//line移入时的的infowindow
+export default {
+  props: {
+    obj: { typs: Object },
+    title: "",
+    data: {},
+    map: null
+  },
+  methods:{
+    moment,
+  }
+
+};
+</script>
+
+<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);
+  overflow: hidden;
+  .top {
+    width: 100%;
+    height: 51px;
+    background-color: #053b6a;
+    .text {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 51px;
+    }
+    .left {
+      padding-left: 22px;
+    }
+    .right {
+      padding-right: 22px;
+      img {
+        cursor: pointer;
+      }
+    }
+  }
+  .content {
+    position: relative;
+    max-height: 400px;
+    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: 100px;
+          }
+        }
+      }
+      .pic {
+        width: 180px;
+        height: 103px;
+        // background-color: black;
+        img {
+          width: 100%;
+          height: 100%;
+          // cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .maintain-content {
+    width: 100%;
+    max-height: 119px;
+    padding-left: 22px;
+    // padding-right: 22px;
+    padding-bottom: 10px;
+    // 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: 280px;
+      }
+    }
+  }
+
+  .warn-content {
+    height: 82px;
+    box-sizing: border-box;
+    padding: 8px 0 0 22px;
+    border-bottom: 1px solid #e2e2e2;
+    & > div {
+      font-size: 14px;
+      font-weight: 400;
+      margin-bottom: 8px;
+    }
+  }
+  .btn {
+    padding-top: 32px;
+    text-align: center;
+    .elbtn {
+      background-color: #053b6a;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      width: 95px;
+      height: 33px;
+    }
+  }
+}
+
+.wrapperEditorPage {
+}
+.display-default {
+  display: flex;
+  justify-content: space-between;
+}
+
+</style>

gassafety-web/src/utils/gaodeMapView.js

@@ -3,9 +3,9 @@ import regulatorBox from "../components/PopWindow/regulatorBox.vue";
 import valveWell from "../components/PopWindow/valveWell.vue";
 import flowMeter from "../components/PopWindow/flowMeter.vue";
 import pipelineView from "../components/PopWindow/pipelineView.vue";
-import lineInfoWindow from "../components/PopWindowGis/lineInfoWindow.vue";
+import lineInfoWindow from "../components/PopWindowGis/lineInfoWindowWarn.vue";
 import { delDeviceInfo } from "@/api/device/deviceInfo";
-import markerInfoWindow from "../components/PopWindow/markerInfoWindow.vue";
+import markerInfoWindow from "../components/PopWindowGis/markerInfoWindow.vue";
 import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.vue";
 import workerManView from "../components/PopWindowGis/workerManView.vue";
 
@@ -204,6 +204,7 @@ class gaodeMap {
         e.target.content = this.getMarketContent(data);
         infoWindow.setContent(e.target.content);
         infoWindow.open(map, e.target.getPosition());
+        that.boxCollision(infoWindow.dom)
         // that.addCloneDome(e.target, infoWindow);
         // infoWindow.close();
         that.workerManInfoWindow = infoWindow;
@@ -307,6 +308,9 @@ class gaodeMap {
       map.setStatus(options);
       infoWindow.setContent(e.target.content);
       infoWindow.open(map, e.target.getPosition());
+
+      // 检测是否碰到底部的bottomData
+      that.boxCollision(infoWindow.dom)
       // that.addCloneDome(e.target, infoWindow);
       // infoWindow.close();
 
@@ -606,6 +610,7 @@ class gaodeMap {
       //添加事件
       polyline.on("mouseover", e => {
         if (this.lineType == 1) return;
+        infoWindow.open(map, e.lnglat);
         // 上方导航的高
         const topBar = 81;
         // 坐标导航的宽
@@ -620,7 +625,7 @@ class gaodeMap {
         const {
           offsetWidth: infoWindowWidth,
           offsetHeight: infoWindowHeight
-        } = { offsetWidth: 406, offsetHeight: 316 };
+        } = infoWindow.dom;
         // 鼠标碰到线后的位置
         const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
         // 鼠标到左边界的距离
@@ -649,7 +654,6 @@ class gaodeMap {
         }
         polyline.setOptions({ strokeColor: "#FF5A67" });
         infoWindow.setOffset(new AMap.Pixel(X, Y));
-        infoWindow.open(map, e.lnglat);
         // 这个是为了盖住vue里的东西
         // polyline.cloneDom = infoWindow.dom.cloneNode(true);
         // polyline.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
@@ -660,6 +664,8 @@ class gaodeMap {
         // infoWindow.close();
         // this.addCloneDome(polyline, infoWindow);
         // infoWindow.close();
+        // 检测是否与底部bottondata碰撞
+        this.boxCollision(infoWindow.dom);
         this.showInfoWindow = infoWindow;
         // const
       });
@@ -673,6 +679,30 @@ class gaodeMap {
     map.add(this.polyLines);
     // 缩放地图到合适的视野级别
     // map.setFitView();
+  }
+  // 碰撞检测
+  boxCollision(infowindowDom){
+        // gis地图页面的bottomdata组件
+    const { RightBototmData:{$el:pageDom} } = this.view.$refs;
+    let {offsetTop:ay,offsetLeft:ax,offsetWidth:aw,offsetHeight:ah} = pageDom;
+    let {y:by,x:bx,width:bw,height:bh} = infowindowDom.getBoundingClientRect();
+    // 如果组件消失了ay回变成0，所以要记录一下，当它为0的时候取记录的值
+    if(ay!=0){
+      this.ay =ay;
+    }else{
+      ay=this.ay;
+    }
+    console.log("ay",ay)
+    if(by+bh>=ay){
+      console.log("隐藏")
+      this.view.bottomDataShow = false;
+    }else{
+      console.log("显示")
+      this.view.bottomDataShow = true;
+    }
+    // if((by+bh) -ay <0)
+
+
   }
   // 把map里的in佛window转化成vue里的dom
   addCloneDome(target, infoWindow) {

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -94,7 +94,7 @@
       </div>
     </div>
 
-    <RightBototmData :list="rightBototmData" />
+    <RightBototmData v-show="bottomDataShow" :class="{classShow:!bottomDataShow}" ref="RightBototmData" :list="rightBototmData" />
   </div>
 </template>
 <script>
@@ -168,6 +168,7 @@ export default {
       keyWord: "",
       // 右下角的数据data
       rightBototmData: [],
+      bottomDataShow:true,
     };
   },
   mounted() {
@@ -184,9 +185,11 @@ export default {
       this.getPipeList();
       // 右下角数据
       this.rightBottomData();
+
     },
     // 右下角数据
     async rightBottomData() {
+      this.gaoMap.view = this;
       await countPipeLength().then((res) => {
         // console.log("管道管道管道管道管道管道", res);
         const obj = { number: res.data, type: "99" };
@@ -443,6 +446,8 @@ export default {
     },
     // 新建下拉列表关闭 window点击事件
     barClose() {
+      // 一点windowbottomData显示
+      this.bottomDataShow=true;
       // return;
       console.log("window");
       this.deviceType = false;
@@ -725,5 +730,8 @@ input[type="radio"] {
   color: white;
   background-color: #053b6a;
 }
+.classShow{
+  opacity: 0;
+}
 </style>