gis地图样式以及功能全部调整完毕

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

@@ -128,7 +128,8 @@ export default {
     close() {
       this.obj.polyline.infoWindow.close();
       // window底部的数据拦
-      this.obj.polyline.getExtData().class.view.bottomDataShow = true;
+      this.obj.polyline.getExtData().class.view.domAllShow();
+
     },
     deviceMore() {
       console.log(this.obj.polyline.getExtData().lineData);

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

@@ -200,7 +200,7 @@ export default {
     },
     close() {
       this.obj.polyline.infoWindow.close();
-      this.obj.polyline.getExtData().class.view.bottomDataShow = true;
+      this.obj.polyline.getExtData().class.view.domAllShow()
     },
   },
 };

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

@@ -97,7 +97,7 @@ export default {
     },
     close() {
       this.map.clearInfoWindow();
-      this.data.class.view.bottomDataShow = true;
+      this.data.class.view.domAllShow()
     },
   },
 };

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

@@ -2,7 +2,9 @@
   <div class="wrapper">
     <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text ddd" :title="data.deviceName">{{ data.deviceName }}</div>
+      <div class="left text ddd" :title="data.deviceName">
+        {{ data.deviceName }}
+      </div>
       <div class="right text">
         <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
@@ -135,7 +137,7 @@ export default {
     },
     close() {
       this.map.clearInfoWindow();
-      this.data.class.view.bottomDataShow = true;
+      this.data.class.view.domAllShow();
     },
     // CreateWorkCallBack(e) {
     //   // console.log("生成工单后传过来的参数", e);

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

@@ -156,7 +156,7 @@ export default {
     // },
     close() {
       this.map.clearInfoWindow();
-      this.data.class.view.bottomDataShow = true;
+      this.data.class.view.domAllShow();
     },
     deviceMore() {
       this.data.class.view.$router.push({

gassafety-web/src/utils/gaodeMapView.js

@@ -80,7 +80,7 @@ class gaodeMap {
       this.closeInfoWindow();
       this.polyLinesColorClear();
 
-      this.view.bottomDataShow = true;
+      this.domAllShow();
       if (this.lineType != 1 || this.lineFlag) return;
       // 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
       if (this.newLineObj) {
@@ -139,13 +139,13 @@ class gaodeMap {
     // 卫星图
 
     if (!bool) {
-      if(this.satellite) return;
-      this.satellite = new AMap.TileLayer.Satellite()
+      if (this.satellite) return;
+      this.satellite = new AMap.TileLayer.Satellite();
       this.myMap.addLayer(this.satellite);
     } else {
-      if(this.satellite){
+      if (this.satellite) {
         this.myMap.removeLayer(this.satellite);
-        this.satellite=null;
+        this.satellite = null;
       }
     }
   }
@@ -284,6 +284,7 @@ class gaodeMap {
       marker.on("mouseover", this.wokerManOpen);
       marker.on("mouseout", e => {
         e.target.infoWindow.close();
+        this.domAllShow()
       });
 
       marker.on("mousedown", e => {
@@ -969,8 +970,15 @@ class gaodeMap {
   boxCollision(infowindowDom) {
     // gis地图页面的bottomdata组件
     const {
-      Bottom: { $el: pageDom }
+      Bottom: { $el: pageDomBottom },
+      Right: { $el: pageDomRight }
     } = this.view.$refs;
+    this.mathWho(infowindowDom, pageDomBottom, "bottomDataShow", "bottom");
+    this.mathWho(infowindowDom, pageDomRight, "rightDataShow", "right");
+  }
+  // domAttr view里的属性
+  //attr 存储在类里的值
+  mathWho(infowindowDom, pageDom, domAttr, attr) {
     let {
       offsetTop: ay,
       offsetLeft: ax,
@@ -985,20 +993,34 @@ class gaodeMap {
     } = infowindowDom.getBoundingClientRect();
     // 如果组件消失了ay回变成0，所以要记录一下，当它为0的时候取记录的值
     if (ay != 0) {
-      this.ay = ay;
+      // this.ay = ay;
+      this[attr + "y"] = ay;
+    } else {
+      // ay = this.ay;
+      ay = this[attr + "y"];
+    }
+
+    if (ax != 0) {
+      // this.ax = ax;
+      this[attr + "x"] = ax;
     } else {
-      ay = this.ay;
+      // ax = this.ax;
+      ax = this[attr + "x"];
     }
     console.log("ay", ay);
-    if (by + bh >= ay) {
+    if (by + bh >= ay && bx + bw >= ax) {
       console.log("隐藏");
-      this.view.bottomDataShow = false;
+      this.view[domAttr] = false;
     } else {
       console.log("显示");
-      this.view.bottomDataShow = true;
+      this.view[domAttr] = true;
     }
-    // if((by+bh) -ay <0)
   }
+  domAllShow() {
+    this.view.bottomDataShow = true;
+    this.view.rightDataShow = true;
+  }
+
   // 把map里的in佛window转化成vue里的dom
   addCloneDome(target, infoWindow) {
     target.cloneDom = infoWindow.dom.cloneNode(true);

gassafety-web/src/views/enterprise/mapView/components/Right.vue

@@ -66,11 +66,12 @@ export default {
 
 <style lang="scss"  scoped>
 .wrapper {
-  width: 300px;
-  height: 800px;
+  width: 270px;
+  height: 700px;
   position: absolute;
   top: 40px;
   right: 0;
+  bottom:0;
   overflow-x: hidden;
   // right: 10px;
   // top: 131px;
@@ -102,6 +103,9 @@ export default {
       background-image: url(../../../../assets/images/listBg.png);
       margin-right: 10px;
       display: flex;
+      &:last-child{
+        margin-bottom:0px !important;
+      }
       &.three {
         margin-right: 0px;
       }

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

@@ -73,7 +73,10 @@
     />
     <Bottom
       v-show="bottomDataShow"
-      :class="{ classShow: !bottomDataShow }"
+      :class="{
+        classShow: !bottomDataShow,
+        bottomMarginRight: bottomMarginRight,
+      }"
       ref="Bottom"
       :list="rightBototmData"
     />
@@ -265,7 +268,7 @@
                 </template>
                 <!-- 无数据 -->
                 <template v-else>
-                  <div style="padding-left: 5px;color:#fff;">暂无数据</div>
+                  <div style="padding-left: 5px; color: #fff">暂无数据</div>
                 </template>
               </div>
             </el-collapse-transition>
@@ -389,6 +392,8 @@ export default {
       rightBototmData: [],
       bottomDataShow: true,
       rightDataShow: true,
+      // 如果右边与下面重叠了，bottom要往左移
+      bottomMarginRight: false,
       // 是否显示生成工单弹框
       createWorkOpen: false,
       //隐患工单
@@ -419,6 +424,7 @@ export default {
     window.removeEventListener("resize", this.onResize);
     window.addEventListener("resize", this.onResize);
     this.initMap();
+
     // });
   },
   watch: {
@@ -433,7 +439,22 @@ export default {
       this.boxHeight = document.body.clientHeight - 80;
       this.boxWidth = document.body.clientWidth;
       console.log("挂在");
+
+      const {
+        Bottom: { $el: pageDomBottom },
+        Right: { $el: pageDomRight },
+      } = this.$refs;
+      // 右边的底
+      const RightBottom = pageDomRight.offsetTop + pageDomRight.offsetHeight;
+      // 下边的上边
+      const bottomTop = pageDomBottom.offsetTop;
+      if(RightBottom>bottomTop){
+        // 重叠了，bottom右移动
+        this.bottomMarginRight=true;
+      }
+
     },
+
     initMap() {
       let gaoMap = new gaodeMap("石家庄");
       this.gaoMap = gaoMap;
@@ -792,6 +813,8 @@ export default {
     leftBarChange(item) {
       // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
       this.gaoMap.closeInfoWindow();
+      this.domAllShow();
+
       this.gaoMap.polyLinesColorClear();
       const index = this.leftBarNum.indexOf(item.value);
       if (index >= 0) {
@@ -875,6 +898,7 @@ export default {
       }
     },
     panToo(iten, item) {
+      this.domAllShow();
       // 如果没打对勾，就啥也不干
       if (!this.leftBarNum.includes(item.value)) return;
       // 点击的时候允许infowindow消失
@@ -1029,6 +1053,7 @@ export default {
       } else {
         this.arrowRightNum.push(item.value);
       }
+      this.domAllShow();
     },
 
     // 管道储存
@@ -1381,6 +1406,10 @@ export default {
       this.gaoMap.lineFlag = false;
       // this.gaoMap.createNewLine();
     },
+    domAllShow() {
+      this.bottomDataShow = true;
+      this.rightDataShow = true;
+    },
     refreshMap() {
       // this.changeBtnDataClear();
       this.keyWord = "";
@@ -1452,8 +1481,8 @@ export default {
     drawerClick() {
       console.log("drawerClick");
       this.gaoMap.polyLinesColorClear();
-
       this.gaoMap.closeInfoWindow();
+      this.domAllShow();
     },
   },
 
@@ -1482,6 +1511,10 @@ export default {
   bottom: 0;
   width: 100%;
 }
+// 如果right与bottom 重叠，则bottom左移动
+.bottomMarginRight{
+  right: 280px;
+}
 // .btn-wrapper {
 //   position: fixed;
 //   right: 32px;