报警infowindow

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

@@ -139,7 +139,7 @@ export default {
   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;

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/utils/gaodeMapView.js

@@ -3,7 +3,7 @@ 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/PopWindowGis/markerInfoWindow.vue";
 import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.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;
@@ -685,6 +686,13 @@ class gaodeMap {
     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;

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

@@ -94,7 +94,7 @@
       </div>
     </div>
 
-    <RightBototmData :class="{classShow:!bottomDataShow}" ref="RightBototmData" :list="rightBototmData" />
+    <RightBototmData v-show="bottomDataShow" :class="{classShow:!bottomDataShow}" ref="RightBototmData" :list="rightBototmData" />
   </div>
 </template>
 <script>