修改gis地图的infowindow的展现方式

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

@@ -128,15 +128,17 @@ export default {
     },
     close() {
       this.obj.polyline.infoWindow.close();
+      // window底部的数据拦
+      this.obj.polyline.getExtData().class.view.bottomDataShow = true;
     },
     deviceMore() {
-      console.log(this.obj.polyline.getExtData().lineData)
+      console.log(this.obj.polyline.getExtData().lineData);
       this.obj.polyline.getExtData().class.view.$router.push({
         path: "/dataMonitoring/realtimedetail",
         query: {
           deviceId: this.obj.polyline.getExtData().lineData.pipeId,
           //这里是传数字
-          deviceType:"0",
+          deviceType: "0",
         },
       });
     },
@@ -151,11 +153,25 @@ 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;
     background-color: #053b6a;
+    position: relative;
+    &:before {
+      content: "";
+      position: absolute;
+      left: -20px;
+      top: 5px;
+      width: 0px;
+      height: 0px;
+      /* border: 20px solid red; */
+      border-top: 15px solid transparent;
+      border-bottom: 15px solid transparent;
+      /* border-left: 50px solid greenyellow; */
+      border-right: 30px solid #053b6a;
+    }
     .text {
       font-weight: 600;
       font-size: 16px;

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

@@ -194,12 +194,13 @@ export default {
         path: "/dataMonitoring/alarmdetail",
         query: {
           alarmId: this.obj.polyline.getExtData().lineData.alarmId,
-          deviceType:"管道"
+          deviceType: "管道",
         },
       });
     },
     close() {
       this.obj.polyline.infoWindow.close();
+      this.obj.polyline.getExtData().class.view.bottomDataShow = true;
     },
   },
 };
@@ -212,11 +213,24 @@ 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;
     background-color: #ff5a67;
+    &:before {
+      content: "";
+      position: absolute;
+      left: -20px;
+      top: 5px;
+      width: 0px;
+      height: 0px;
+      /* border: 20px solid red; */
+      border-top: 15px solid transparent;
+      border-bottom: 15px solid transparent;
+      /* border-left: 50px solid greenyellow; */
+      border-right: 30px solid #ff5a67;
+    }
     .text {
       font-weight: 600;
       font-size: 16px;

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

@@ -7,7 +7,7 @@
         <img
           src="../../assets/images/closeBtn.png"
           alt=""
-          @click="map.clearInfoWindow()"
+          @click="close"
         />
       </div>
     </div>
@@ -98,6 +98,10 @@ export default {
         },
       });
     },
+    close(){
+      this.map.clearInfoWindow();
+      this.data.class.view.bottomDataShow = true;
+    }
   },
 };
 </script>
@@ -109,11 +113,24 @@ 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;
     background-color: #053b6a;
+    &:before {
+      content: "";
+      position: absolute;
+      left: -20px;
+      top: 5px;
+      width: 0px;
+      height: 0px;
+      /* border: 20px solid red; */
+      border-top: 15px solid transparent;
+      border-bottom: 15px solid transparent;
+      /* border-left: 50px solid greenyellow; */
+      border-right: 30px solid #053b6a;
+    }
     .text {
       font-weight: 600;
       font-size: 16px;

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

@@ -7,7 +7,7 @@
         <img
           src="../../assets/images/closeBtn.png"
           alt=""
-          @click="map.clearInfoWindow()"
+          @click="close"
         />
       </div>
     </div>
@@ -137,6 +137,10 @@ export default {
         type: "device",
       });
     },
+    close(){
+      this.map.clearInfoWindow();
+      this.data.class.view.bottomDataShow = true;
+    },
     // CreateWorkCallBack(e) {
     //   // console.log("生成工单后传过来的参数", e);
     //   // console.log("markerCallBack");
@@ -181,11 +185,24 @@ 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;
     background-color: #ff5a67;
+     &:before {
+      content: "";
+      position: absolute;
+      left: -20px;
+      top: 5px;
+      width: 0px;
+      height: 0px;
+      /* border: 20px solid red; */
+      border-top: 15px solid transparent;
+      border-bottom: 15px solid transparent;
+      /* border-left: 50px solid greenyellow; */
+      border-right: 30px solid #ff5a67;
+    }
     .text {
       font-weight: 600;
       font-size: 16px;

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

@@ -4,11 +4,7 @@
     <div class="top display-default">
       <div class="left text">{{ data.troubleName }}</div>
       <div class="right text">
-        <img
-          src="../../assets/images/closeBtn.png"
-          alt=""
-          @click="map.clearInfoWindow()"
-        />
+        <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
     </div>
     <!-- 设备信息 -->
@@ -72,7 +68,9 @@
           关联设备：<span>{{ data.deviceName ? data.deviceName : "-" }}</span>
         </div>
         <div>
-          设备类型：<span>{{ data.deviceType ? this.deviceType[data.deviceType] : "-" }}</span>
+          设备类型：<span>{{
+            data.deviceType ? this.deviceType[data.deviceType] : "-"
+          }}</span>
         </div>
         <div v-if="!orderId">
           工单编号：<span>{{ data.orderId }}</span>
@@ -83,11 +81,7 @@
           <el-button class="elbtn" type="primary">隐患详情</el-button>
         </span>
         <span v-if="orderId" @mousedown.stop="createWork">
-          <el-button
-            class="elbtn"
-            type="primary"
-            >生成工单</el-button
-          >
+          <el-button class="elbtn" type="primary">生成工单</el-button>
         </span>
         <span v-else @mousedown.stop="checkWork">
           <el-button class="elbtn" type="primary">查看工单</el-button>
@@ -121,7 +115,7 @@ export default {
   computed: {
     orderId() {
       // 如果已经生成过工单，就不能再次生成了
-      console.log("orderId",this.data.orderId)
+      console.log("orderId", this.data.orderId);
       // return this.data.orderId ? false : true;
       return this.data.orderId ? false : true;
     },
@@ -131,15 +125,20 @@ export default {
     createWork() {
       // 控制外层弹框
       // console.log(this.data.view.$refs.CreateWork);
-      this.data.class.view.$refs.CreateWorkTrouble.form.troubleId = this.data.troubleId;
-      this.data.class.view.$refs.CreateWorkTrouble.form.troubleName = this.data.troubleName;
-      this.data.class.view.$refs.CreateWorkTrouble.form.troubleType = this.data.troubleType;
-      this.data.class.view.$refs.CreateWorkTrouble.form.troubleLevel = this.data.troubleLevel;
+      this.data.class.view.$refs.CreateWorkTrouble.form.troubleId =
+        this.data.troubleId;
+      this.data.class.view.$refs.CreateWorkTrouble.form.troubleName =
+        this.data.troubleName;
+      this.data.class.view.$refs.CreateWorkTrouble.form.troubleType =
+        this.data.troubleType;
+      this.data.class.view.$refs.CreateWorkTrouble.form.troubleLevel =
+        this.data.troubleLevel;
       this.data.class.view.$refs.CreateWorkTrouble.open = true;
-      this.data.class.view.$refs.CreateWorkTrouble.gaoMap = this.data.class.view.gaoMap;
+      this.data.class.view.$refs.CreateWorkTrouble.gaoMap =
+        this.data.class.view.gaoMap;
       // 改变外层回调
       // this.data.view.CreateWorkCallBack = this.CreateWorkCallBack;
-      this.data.class.view.troubleObjChange({troubleId:this.data.troubleId});
+      this.data.class.view.troubleObjChange({ troubleId: this.data.troubleId });
     },
     // CreateWorkCallBack(e) {
     //   // console.log("生成工单后传过来的参数", e);
@@ -153,6 +152,10 @@ export default {
     //   options.orderId = e;
     //   marker.setExtData(options);
     // },
+    close() {
+      this.map.clearInfoWindow();
+      this.data.class.view.bottomDataShow = true;
+    },
     deviceMore() {
       this.data.class.view.$router.push({
         path: "/riskManagement/hiddenTroubleDetail",
@@ -185,11 +188,24 @@ 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;
     background-color: #e6a23c;
+    &:before {
+      content: "";
+      position: absolute;
+      left: -20px;
+      top: 5px;
+      width: 0px;
+      height: 0px;
+      /* border: 20px solid red; */
+      border-top: 15px solid transparent;
+      border-bottom: 15px solid transparent;
+      /* border-left: 50px solid greenyellow; */
+      border-right: 30px solid #e6a23c;
+    }
     .text {
       font-weight: 600;
       font-size: 16px;

gassafety-web/src/utils/gaodeMapView.js

@@ -77,6 +77,9 @@ class gaodeMap {
 
     this.myMap.on("click", e => {
       // if (this.lineType !=1 || this.lineFlag) return;
+      this.closeInfoWindow();
+      this.view.bottomDataShow=true;
+
       if (this.lineType != 1 || this.lineFlag) return;
 
       // 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
@@ -97,10 +100,14 @@ class gaodeMap {
 
       // //console.log("抬起来了");
     });
+    this.myMap.on("mousedown", (e) => {
+      console.log(e)
+      // this.closeInfoWindow();
+    });
     // 地图开始平移删除infowindow
     this.myMap.on("movestart", () => {
       // console.log("地图平移");
-      this.closeInfoWindow();
+      // this.closeInfoWindow();
     });
     // 地图开始缩放删除infowindow
     this.myMap.on("zoomstart", () => {
@@ -258,7 +265,7 @@ class gaodeMap {
       marker.markerType = markerType;
       marker.data = data;
       marker.infoWindow = infoWindow;
-      marker.on("mouseover", this.wokerManOpen);
+      marker.on("mousedown", this.wokerManOpen);
       marker.on("mousedown", e => {
         // console.log(data);
         that.closeInfoWindow();
@@ -279,7 +286,7 @@ class gaodeMap {
       marker.markerType = markerType;
       marker.data = data;
       marker.infoWindow = infoWindow;
-      marker.on("mouseover", this.troubleOpen);
+      marker.on("mousedown", this.troubleOpen);
       marker.setExtData(data);
       this.troubles.push(marker);
     }
@@ -292,7 +299,7 @@ class gaodeMap {
     ) {
       // marker.content = this.getMarketContent(data, markerInfoWindow);
       marker.infoWindow = infoWindow;
-      marker.on("mouseover", that.infoOpen);
+      marker.on("mousedown", that.infoOpen);
       marker.on("mouseout", infoClose);
       marker.setExtData(data);
       that.deviceType = markerType;
@@ -801,7 +808,7 @@ class gaodeMap {
       // 信息窗体
       this.newLineAddEvent(polyline);
       //添加事件
-      polyline.on("mouseover", this.polylineMouseOver);
+      polyline.on("mousedown", this.polylineMouseOver);
 
       polyline.on("mouseout", e => {
         // console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
@@ -834,7 +841,7 @@ class gaodeMap {
     console.log(infoWindow);
     // 如果是鼠标真正移入，则计算位置，如果不是鼠标真正移入，是人为执行出现infowindow，则不计算位置
     console.log("e.originEvent", e.originEvent);
-    if (e.originEvent) {
+    if (e.originEvent && 0) {
       // 上方导航的高
       const topBar = 81;
       // 坐标导航的宽
@@ -906,11 +913,11 @@ class gaodeMap {
     });
     let infoWindow = new AMap.InfoWindow({
       isCustom: true,
-      autoMove: false,
+      autoMove: true,
       content: dom.$el,
       //信息船体偏移量
-      offset: new AMap.Pixel(0, 0),
-      anchor: "left-top"
+      // offset: new AMap.Pixel(0, 0),
+      anchor: "left-topr"
     });
     polyline.infoWindow = infoWindow;
     return infoWindow;

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

@@ -86,6 +86,7 @@
       ref="drawer"
       class="drawer"
       :class="{ back: backFlag, opacity: drawerOpacity }"
+      @mousedown="drawerClick"
     >
       <div class="switch" @click="backFlag = !backFlag">
         <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
@@ -122,7 +123,7 @@
                 active: leftBarNum.indexOf(item.value) >= 0,
                 firstbox: index == 0,
               }"
-              @click.stop="arrowRightChange(item)"
+              @click="arrowRightChange(item)"
             >
               <span class="upPic"> 上图 </span>
               <div class="left">
@@ -211,7 +212,7 @@
                         :class="{ topActive: index == 0 }"
                         v-for="(iten, index) in item.list"
                         :key="iten.deviceId + `` + index"
-                        @click.stop="panToo(iten, item)"
+                        @mousedown="panToo(iten, item)"
                       >
                         <div class="no">{{ iten.no + 1 }}</div>
                         <div :title="iten.userName" class="code">
@@ -404,6 +405,7 @@ export default {
     initMap() {
       let gaoMap = new gaodeMap("石家庄");
       this.gaoMap = gaoMap;
+      window.removeEventListener("mousedown", this.barClose);
       window.addEventListener("mousedown", this.barClose);
       gaoMap.addMouseTool();
       gaoMap.searchTips("tipinput");
@@ -797,7 +799,9 @@ export default {
       this.gaoMap.myMap.setZoom(11);
       if (item.list.length > 0) {
         if (this.leftBarNum.includes(item.value)) {
-          this.gaoMap.panTo(iten.path);
+          const path =
+            item.value == 1 ? [iten.lnglat[0],iten.lnglat[1]-0.1] : [iten.path[0], iten.path[1] - 0.1];
+          this.gaoMap.panTo(path);
         }
       }
       // 当前地图中心点
@@ -1229,12 +1233,12 @@ export default {
     // 新建下拉列表关闭 window点击事件
     barClose() {
       // 一点windowbottomData显示
-      this.bottomDataShow = true;
+      // this.bottomDataShow = true;
       // return;
       console.log("window");
       this.deviceType = false;
       // 关闭当前线条的infowindow
-      this.gaoMap.closeInfoWindow();
+      // this.gaoMap.closeInfoWindow();
       // 如果没有选择的时候点window 则高亮消失
       if (this.targetNum == 1 && this.iconClass == "icon-create") {
         this.targetNum = 0;
@@ -1257,7 +1261,7 @@ export default {
         item.nowPage = 1;
       });
       map.clearMap();
-      
+
       this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
       this.initMap();
     },
@@ -1313,6 +1317,9 @@ export default {
     troubleObjChange(obj) {
       this.troubleObj = obj;
     },
+    drawerClick() {
+      this.gaoMap.closeInfoWindow();
+    },
   },
 
   beforeDestroy() {