抽屉列表点击infowindow显示

gassafety-web/src/utils/gaodeMapView.js

@@ -49,6 +49,7 @@ class gaodeMap {
   // 工人轨迹用的窗口
   markerPassedPolylineInfoWindow = null;
   view = null;
+  handleInfoWindowOpenFunc = null;
 
   //构造函数中设置中央点默认值
   constructor(center) {
@@ -101,8 +102,15 @@ class gaodeMap {
       // console.log("缩放开始")
       this.closeInfoWindow();
     });
+    this.myMap.on("moveend", () => {
+      if (this.handleInfoWindowOpenFunc) {
+        this.handleInfoWindowOpenFunc();
+        this.handleInfoWindowOpenFunc = null;
+      }
+    });
     this.districtBoundaries();
   }
+  // 地图移动结束
 
   /**
    * 获取map
@@ -156,7 +164,10 @@ class gaodeMap {
       }
     });
   }
-
+  // 地图中点平移
+  panTo(lnglat) {
+    this.myMap.panTo(lnglat);
+  }
   /**
    * 添加Market
    * @param markerType
@@ -247,10 +258,10 @@ class gaodeMap {
       DEVICE_TYPE.SMALLINSPECTOR != markerType
     ) {
       // marker.content = this.getMarketContent(data, markerInfoWindow);
-      marker.on("mouseover", infoOpen);
+      marker.infoWindow = infoWindow;
+      marker.on("mouseover", that.infoOpen);
       marker.on("mouseout", infoClose);
       marker.setExtData(data);
-
       that.deviceType = markerType;
       let editWindow = that.createInfowindow("编辑");
       editWindow.fileArr =
@@ -327,55 +338,56 @@ class gaodeMap {
       //infoWindow.close(map, e.target.getPosition());
     }
 
-    function infoOpen(e) {
-      if (e.target.getExtData().alarmState == 1) {
-        if (e.target.getExtData().deviceType == 4) {
-          that.markerType = "7";
-        } else if (e.target.getExtData().deviceType <= 3) {
-          that.markerType = +e.target.getExtData().deviceType + 1 + "";
-        }
-        console.log("that.markerType", that.markerType);
-        // 警告状态这样就要换infowindow
-        e.target.content = that.getMarketContent(
-          e.target.getExtData(),
-          markerInfoWindowWarn
-        );
-      } else {
-        // 初始化为1的时候是没有的，所以需要判断一下
-        // that.markerType =
-        //   e.target.getExtData().deviceType + "" == 1
-        //     ? "2"
-        //     : e.target.getExtData().deviceType + "";
-        // 上图状态跟后台状态不统一，所以需要判断一下
-        if (e.target.getExtData().deviceType == 4) {
-          that.markerType = "7";
-        } else if (e.target.getExtData().deviceType <= 3) {
-          that.markerType = +e.target.getExtData().deviceType + 1 + "";
-        }
-        console.log("that.markerType");
-        e.target.content = that.getMarketContent(
-          e.target.getExtData(),
-          markerInfoWindow
-        );
-      }
+    // function infoOpen(e) {}
 
-      let options = map.getStatus();
-      options.scrollWheel = false;
-      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();
+    return marker;
+  }
 
-      that.markerInfoWindow = infoWindow;
+  infoOpen = e => {
+    if (e.target.getExtData().alarmState == 1) {
+      if (e.target.getExtData().deviceType == 4) {
+        this.markerType = "7";
+      } else if (e.target.getExtData().deviceType <= 3) {
+        this.markerType = +e.target.getExtData().deviceType + 1 + "";
+      }
+      console.log("that.markerType", this.markerType);
+      // 警告状态这样就要换infowindow
+      e.target.content = this.getMarketContent(
+        e.target.getExtData(),
+        markerInfoWindowWarn
+      );
+    } else {
+      // 初始化为1的时候是没有的，所以需要判断一下
+      // that.markerType =
+      //   e.target.getExtData().deviceType + "" == 1
+      //     ? "2"
+      //     : e.target.getExtData().deviceType + "";
+      // 上图状态跟后台状态不统一，所以需要判断一下
+      if (e.target.getExtData().deviceType == 4) {
+        this.markerType = "7";
+      } else if (e.target.getExtData().deviceType <= 3) {
+        this.markerType = +e.target.getExtData().deviceType + 1 + "";
+      }
+      console.log("this.markerType");
+      e.target.content = this.getMarketContent(
+        e.target.getExtData(),
+        markerInfoWindow
+      );
     }
 
-    return marker;
-  }
+    let options = map.getStatus();
+    options.scrollWheel = false;
+    map.setStatus(options);
+    e.target.infoWindow.setContent(e.target.content);
+    e.target.infoWindow.open(map, e.target.getPosition());
 
+    // 检测是否碰到底部的bottomData
+    this.boxCollision(e.target.infoWindow.dom);
+    // that.addCloneDome(e.target, infoWindow);
+    // infoWindow.close();
+
+    this.markerInfoWindow = e.target.infoWindow;
+  };
   /**
    * marker添加拖拽事件
    */
@@ -399,7 +411,7 @@ class gaodeMap {
    * @returns {string}
    */
   getMarketContent(Data, markerInfoWindow) {
-    let data = {...Data}
+    let data = { ...Data };
     data.class = this;
     console.log("this.markerType", this.markerType);
     switch (this.markerType) {
@@ -407,7 +419,7 @@ class gaodeMap {
         const dom = createPop(markerInfoWindow, {
           title: "调压箱",
           data: data,
-          map: map,
+          map: map
         });
         const html = dom.$el;
         dom.remove();
@@ -715,69 +727,8 @@ class gaodeMap {
       // 信息窗体
       this.newLineAddEvent(polyline);
       //添加事件
-      polyline.on("mouseover", e => {
-        if (this.lineType == 1) return;
-        // 生成infoWindow
-        let infoWindow;
-        // 警告状态时
-        if (e.target.getExtData().lineData.alarmState == 1) {
-          infoWindow = this.lineMouseOver(polyline, lineInfoWindowWarn, item);
-        } else {
-          infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
-        }
-        infoWindow.open(map, e.lnglat);
-        // 上方导航的高
-        const topBar = 81;
-        // 坐标导航的宽
-        const leftBar = 100;
-        // 屏幕可视区的宽高
-        const {
-          clientWidth: windowClientWidth,
-          clientHeight: windowClientHeight
-        } = document.body;
-        // 弹出的信息窗口的宽高
-
-        const {
-          offsetWidth: infoWindowWidth,
-          offsetHeight: infoWindowHeight
-        } = infoWindow.dom;
-        // 鼠标碰到线后的位置
-        const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
-        // 鼠标到左边界的距离
-        const offsetLeftX = mouseClientX - 100;
-        // 鼠标到右边界的距离
-        const offsetRightX = windowClientWidth - mouseClientX;
-        const offsetTopY = mouseClientY - 81;
-        const offsetBottomY = windowClientHeight - mouseClientY;
-
-        const offsetY = mouseClientY - 80 - infoWindowHeight;
-        let X = 20,
-          Y = -20;
-        if (offsetLeftX <= infoWindowWidth) {
-          //console.log("靠左了");
-          X = 20;
-        } else if (offsetRightX <= infoWindowWidth) {
-          //console.log("靠右了");
-          X = -infoWindowWidth - 20;
-        }
-        if (offsetTopY <= infoWindowHeight) {
-          //console.log("靠上了");
-          Y = 20;
-        } else if (offsetBottomY <= infoWindowHeight + 81) {
-          //console.log("靠下了");
-          Y = -infoWindowHeight - 20;
-        }
-        if (polyline.getExtData().lineData.alarmState == 1) {
-          polyline.setOptions({ strokeColor: "#ff0000" });
-        } else {
-          polyline.setOptions({ strokeColor: "#FF5A67" });
-        }
+      polyline.on("mouseover", this.polylineMouseOver);
 
-        infoWindow.setOffset(new AMap.Pixel(X, Y));
-        this.boxCollision(infoWindow.dom);
-        this.showInfoWindow = infoWindow;
-        // const
-      });
       polyline.on("mouseout", e => {
         // console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
         if (polyline.getExtData().lineData.alarmState == 1) return;
@@ -791,6 +742,81 @@ class gaodeMap {
     // 缩放地图到合适的视野级别
     // map.setFitView();
   }
+  // 鼠标移入线条执行
+  polylineMouseOver = e => {
+    let polyline = e.target;
+    if (this.lineType == 1) return;
+    // 生成infoWindow
+    let infoWindow;
+    // 警告状态时
+    const item = e.target.getExtData().lineData;
+    // console.log("item",item)
+
+    if (e.target.getExtData().lineData.alarmState == 1) {
+      infoWindow = this.lineMouseOver(polyline, lineInfoWindowWarn, item);
+    } else {
+      infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
+    }
+    infoWindow.open(map, e.lnglat);
+    console.log(infoWindow);
+    // 如果是鼠标真正移入，则计算位置，如果不是鼠标真正移入，是人为执行出现infowindow，则不计算位置
+    console.log("e.originEvent", e.originEvent);
+    if (e.originEvent) {
+      // 上方导航的高
+      const topBar = 81;
+      // 坐标导航的宽
+      const leftBar = 100;
+      // 屏幕可视区的宽高
+      const {
+        clientWidth: windowClientWidth,
+        clientHeight: windowClientHeight
+      } = document.body;
+      // 弹出的信息窗口的宽高
+
+      const {
+        offsetWidth: infoWindowWidth,
+        offsetHeight: infoWindowHeight
+      } = infoWindow.dom;
+      // 鼠标碰到线后的位置
+      const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
+      // 鼠标到左边界的距离
+      const offsetLeftX = mouseClientX - 100;
+      // 鼠标到右边界的距离
+      const offsetRightX = windowClientWidth - mouseClientX;
+      const offsetTopY = mouseClientY - 81;
+      const offsetBottomY = windowClientHeight - mouseClientY;
+
+      const offsetY = mouseClientY - 80 - infoWindowHeight;
+      let X = 20,
+        Y = -20;
+      if (offsetLeftX <= infoWindowWidth) {
+        //console.log("靠左了");
+        X = 20;
+      } else if (offsetRightX <= infoWindowWidth) {
+        //console.log("靠右了");
+        X = -infoWindowWidth - 20;
+      }
+      if (offsetTopY <= infoWindowHeight) {
+        //console.log("靠上了");
+        Y = 20;
+      } else if (offsetBottomY <= infoWindowHeight + 81) {
+        //console.log("靠下了");
+        Y = -infoWindowHeight - 20;
+      }
+      if (polyline.getExtData().lineData.alarmState == 1) {
+        polyline.setOptions({ strokeColor: "#ff0000" });
+      } else {
+        polyline.setOptions({ strokeColor: "#FF5A67" });
+      }
+      infoWindow.setOffset(new AMap.Pixel(X, Y));
+    } else {
+      infoWindow.setOffset(new AMap.Pixel(20, -20));
+    }
+    this.boxCollision(infoWindow.dom);
+    this.showInfoWindow = infoWindow;
+    // const
+  };
+
   lineMouseOver(polyline, lineInfoWindow, item) {
     let dom = createPop(lineInfoWindow, {
       obj: { a: 123, editorPage: true, ...item, polyline }

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

@@ -137,25 +137,26 @@
                   <div>
                     <div class="thead">
                       <div class="no">序号</div>
-                      <div class="name">设备名称</div>
                       <div class="code">设备编号</div>
+                      <div class="name">设备名称</div>
                     </div>
                     <div
                       class="deviceList"
                       :class="{ topActive: index == 0 }"
-                      v-for="(item, index) in item.list"
-                      :key="item.deviceId + `` + index"
+                      v-for="(iten, index) in item.list"
+                      :key="iten.deviceId + `` + index"
+                      @mousedown.stop="panToo(iten, item)"
                     >
-                      <div class="no">{{ item.no + 1 }}</div>
-                      <div :title="item.deviceName" class="name">
-                        {{ item.deviceName }}
+                      <div class="no">{{ iten.no + 1 }}</div>
+                      <div :title="iten.code" class="code">{{ iten.code }}</div>
+                      <div :title="iten.deviceName" class="name">
+                        {{ iten.deviceName }}
                       </div>
-                      <div :title="item.code" class="code">{{ item.code }}</div>
                     </div>
                   </div>
                 </template>
                 <!-- 值班人员 展示不太一样-->
-                <templage v-else-if="item.value == 9">
+                <template v-else-if="item.value == 9">
                   <div>
                     <div class="thead">
                       <div class="no">序号</div>
@@ -164,21 +165,22 @@
                     <div
                       class="deviceList"
                       :class="{ topActive: index == 0 }"
-                      v-for="(item, index) in item.list"
-                      :key="item.deviceId + `` + index"
+                      v-for="(iten, index) in item.list"
+                      :key="iten.deviceId + `` + index"
+                      @click.stop="panToo(iten, item)"
                     >
-                      <div class="no">{{ item.no + 1 }}</div>
-                      <div :title="item.userName" class="code">
-                        {{ item.userName }}
+                      <div class="no">{{ iten.no + 1 }}</div>
+                      <div :title="iten.userName" class="code">
+                        {{ iten.userName }}
                       </div>
                     </div>
                   </div>
-                </templage>
+                </template>
 
                 <div class="goback">
                   <div class="minMax">
                     页数
-                    {{item.nowPage}}/{{item.maxPage}}
+                    {{ item.nowPage }}/{{ item.maxPage }}
                   </div>
                   <div class="btn">
                     <el-button
@@ -349,9 +351,9 @@ export default {
       this.getResource();
       // 把组件this传入类
       this.gaoMap.view = this;
-
       // 右下角数据 跟值班人员
       this.rightBottomData();
+
       this.backFlag = false;
     },
 
@@ -591,6 +593,7 @@ export default {
 
     // 右下角数据
     async rightBottomData() {
+      this.rightBototmData = [];
       await countPipeLength().then((res) => {
         // console.log("管道管道管道管道管道管道", res);
         if (res.code == 200) {
@@ -639,17 +642,21 @@ export default {
     // 左边的Bar修改值 左边抽屉
     leftBarChange(item) {
       // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
+
       const index = this.leftBarNum.indexOf(item.value);
+
       if (index >= 0) {
         this.leftBarNum.splice(index, 1);
       } else {
         this.leftBarNum.push(item.value);
+        this.panTo(item);
       }
       // 1,2,3,4,7分别对应数据库type5，1，2，3，4
-      console.log(this.leftBarNum);
+      // console.log(this.leftBarNum);
 
       if (this.leftBarNum.includes(1)) {
         this.gaoMap.lineShow(true);
+        // this.panTo(item);
       } else {
         this.gaoMap.lineShow(false);
       }
@@ -658,35 +665,111 @@ export default {
       // this.gaoMap.markerShow();
       if (this.leftBarNum.includes(2)) {
         this.gaoMap.markerShow(1, true);
+        // this.panTo(item);
       } else {
         this.gaoMap.markerShow(1, false);
       }
 
       if (this.leftBarNum.includes(3)) {
         this.gaoMap.markerShow(2, true);
+        // this.panTo(item);
       } else {
         this.gaoMap.markerShow(2, false);
       }
 
       if (this.leftBarNum.includes(4)) {
         this.gaoMap.markerShow(3, true);
+        // this.panTo(item);
       } else {
         this.gaoMap.markerShow(3, false);
       }
 
       if (this.leftBarNum.includes(7)) {
         this.gaoMap.markerShow(4, true);
+        // this.panTo(item);
       } else {
         this.gaoMap.markerShow(4, false);
       }
 
       if (this.leftBarNum.includes(9)) {
         this.gaoMap.markerShow(9, true);
+        // this.panTo(item);
       } else {
         this.gaoMap.markerShow(9, false);
       }
     },
+    panTo(item, bool) {
+      if (item.list.length > 0) {
+        if (this.leftBarNum.includes(item.value)) {
+          this.gaoMap.panTo(item.list[0].path);
+        }
+      }
+    },
+    panToo(iten, item) {
+      // 如果没打对勾，就啥也不干
+      if(!this.leftBarNum.includes(item.value) ) return
+
+      // 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
+      this.gaoMap.myMap.setZoom(11);
+      if (item.list.length > 0) {
+        if (this.leftBarNum.includes(item.value)) {
+          this.gaoMap.panTo(iten.path);
+        }
+      }
+      // 当前地图中心点
+      const { lat, lng } = this.gaoMap.myMap.getCenter();
+      // 管道是这个方法，因为管道比较特殊
+
+      if (item.value == 1) {
+        this.polylineInfoWindowShow(iten, lat, lng);
+      } else if (item.value == 9) {
+        // 工作人员
+      } else {
+        // 其他设备
+        this.diveceInfoWindowShow(iten, lat, lng);
+      }
+    },
 
+    // 如果是线条出现infowindow
+    polylineInfoWindowShow(iten, lat, lng) {
+      const target = this.gaoMap.polyLines.filter((item) => {
+        return item.getExtData().lineData.pipeId == iten.deviceId;
+      })[0];
+      console.log("target", target);
+      const e = {
+        target,
+        lnglat: iten.lnglat,
+      };
+      // 如果是原地不动，就直接执行
+      if (iten.path[0] == lng && iten.path[1] == lat) {
+        this.gaoMap.polylineMouseOver(e);
+        return;
+      }
+      // 因为地图移动的时候infowindow无法显示
+      this.gaoMap.handleInfoWindowOpenFunc = () => {
+        this.gaoMap.polylineMouseOver(e);
+      };
+    },
+    // 这个是其他设备的infowindow
+    diveceInfoWindowShow(iten, lat, lng) {
+      const target = this.gaoMap.markers.filter((item) => {
+        return item.getExtData().deviceId == iten.deviceId;
+      })[0];
+      console.log("target", target);
+      const e = {
+        target,
+        lnglat: iten.path,
+      };
+      // 如果是原地不动，就直接执行
+      if (iten.path[0] == lng && iten.path[1] == lat) {
+        this.gaoMap.infoOpen(e);
+        return;
+      }
+      // 因为地图移动的时候infowindow无法显示
+      this.gaoMap.handleInfoWindowOpenFunc = () => {
+        this.gaoMap.infoOpen(e);
+      };
+    },
     arrowRightChange(item) {
       const index = this.arrowRightNum.indexOf(item.value);
       if (index >= 0) {
@@ -699,7 +782,10 @@ export default {
     // 管道储存
     pipeClassify(pipeData) {
       const pipeArr = pipeData.map((item, index) => {
+        // console.log( '管道路径',eval(item.coordinates )[0])
         return {
+          lnglat: eval(item.coordinates)[0],
+          path: eval(item.coordinates)[1],
           no: index,
           deviceId: item.pipeId,
           deviceType: "0",
@@ -719,6 +805,7 @@ export default {
         })
         .map((item, index) => {
           return {
+            path: [item.longitude, item.latitude],
             no: index,
             deviceId: item.deviceId,
             deviceType: item.deviceType,
@@ -733,6 +820,7 @@ export default {
         })
         .map((item, index) => {
           return {
+            path: [item.longitude, item.latitude],
             no: index,
             deviceId: item.deviceId,
             deviceType: item.deviceType,
@@ -747,6 +835,7 @@ export default {
         })
         .map((item, index) => {
           return {
+            path: [item.longitude, item.latitude],
             no: index,
             deviceId: item.deviceId,
             deviceType: item.deviceType,
@@ -761,6 +850,7 @@ export default {
         })
         .map((item, index) => {
           return {
+            path: [item.longitude, item.latitude],
             no: index,
             deviceId: item.deviceId,
             deviceType: item.deviceType,
@@ -768,7 +858,7 @@ export default {
             code: item.iotNo,
           };
         });
-      console.log("设备", tyxArr, fmjArr, lljArr, ylbArr);
+      // console.log("设备", tyxArr, fmjArr, lljArr, ylbArr);
       this.allList[1] = tyxArr;
       this.allList[2] = fmjArr;
       this.allList[3] = lljArr;
@@ -777,6 +867,7 @@ export default {
     workerManClassify(workManData) {
       const workManArr = workManData.map((item, index) => {
         return {
+          path: [item.longitude, item.latitude],
           no: index,
           userId: item.userId,
           userName: item.userName,
@@ -1260,6 +1351,7 @@ input[type="radio"] {
       }
     }
     .deviceList {
+      cursor: pointer;
       &.topActive {
         border-top: 1px solid #cccccc;
       }
@@ -1282,11 +1374,11 @@ input[type="radio"] {
       width: 50px;
     }
     .name {
-      width: 100px;
+      // border-right: none;
+      flex: 1;
     }
     .code {
-      border-right: none;
-      flex: 1;
+      width: 100px;
     }
   }
   .box {
@@ -1373,14 +1465,13 @@ input[type="radio"] {
     }
   }
   .goback {
-
     display: flex;
     justify-content: space-between;
-    .minMax{
+    .minMax {
       font-size: 14px;
       line-height: 28px;
       box-sizing: border-box;
-      padding-left:3px;
+      padding-left: 3px;
     }
     .btn {
       text-align: right;