Merge branch 'develop_jzl'

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

@@ -271,7 +271,14 @@ export default {
               if (res.code == 200) {
                 this.dialogVisible = false;
                 data.pipeId = data.pipeId ? data.pipeId : res.data;
-                this.lineOkCallBack.call(this.gaodeMap, this.target, data);
+                this.lineOkCallBack.call(this.gaodeMap, this.target, data,()=>{
+                  const arr= this.gaodeMap.polyLines.map(item=>{
+                    return item.getExtData().lineData
+                  })
+                  console.log("arr===================",arr)
+                  this.gaodeMap.view.pipeClassify(arr)
+                  this.gaodeMap.view.pipeList();
+                });
                 if (!this.editForm.pipeId) {
                   this.gaodeMap.newLineObj = null;
                   this.gaodeMap.createNewLine();

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

@@ -214,10 +214,12 @@ export default {
         if (valid) {
           if (this.form.deviceId != null) {
             updateDeviceInfo(this.form).then((response) => {
+              if (response.code == 200) {
                 this.dialogVisible = false;
                 this.map.remove(this.obj);
                 this.gaoMap.addMarker(this.gaoMap.deviceType, this.form);
                 this.msgSuccess("修改成功");
+              }
             });
           } else {
             addDeviceInfo(this.form).then((response) => {

gassafety-web/src/utils/gaodeMap.js

@@ -35,6 +35,8 @@ class gaodeMap {
   myMap = null;
   showInfoWindow = null;
   view = null;
+  // 地图移动结束后出现infowindow用的函数
+  handleInfoWindowOpenFunc = null;
 
   //构造函数中设置中央点默认值
   constructor(center) {
@@ -88,6 +90,10 @@ class gaodeMap {
       this.closeInfoWindow();
     });
     this.myMap.on("moveend", () => {
+      if (this.handleInfoWindowOpenFunc) {
+        this.handleInfoWindowOpenFunc();
+        this.handleInfoWindowOpenFunc = null;
+      }
       // console.log("缩放开始")
       if (!this.onceFlag) {
         this.onceFlag = true;
@@ -101,7 +107,9 @@ class gaodeMap {
 
     this.districtBoundaries();
   }
-
+  panTo(lnglat) {
+    this.myMap.panTo(lnglat);
+  }
   /**
    * 获取map
    * @returns {AMap.Map}
@@ -160,7 +168,7 @@ class gaodeMap {
    * @param markerType
    * @param lnglats
    */
-  addMarker(markerType, data) {
+  addMarker(markerType, data, func) {
     let that = this;
     that.markerType = markerType;
     let infoWindow = new AMap.InfoWindow({
@@ -189,8 +197,9 @@ class gaodeMap {
       DEVICE_TYPE.INSPECTOR != markerType
     ) {
       marker.content = this.getMarketContent(data);
-      marker.on("mouseover", infoOpen);
+      marker.on("mouseover", this.infoOpen);
       marker.on("mouseout", infoClose);
+      marker.infoWindow = infoWindow;
       marker.setExtData(data);
       that.deviceType = markerType;
       let editWindow = that.createInfowindow("编辑");
@@ -287,17 +296,19 @@ class gaodeMap {
       map.setStatus(options);
       //infoWindow.close(map, e.target.getPosition());
     }
-
-    function infoOpen(e) {
+    if (func) {
+      func();
+    }
+  }
+  // 其他设备
+  infoOpen = e => {
     let options = map.getStatus();
     options.scrollWheel = false;
     map.setStatus(options);
-      infoWindow.setContent(e.target.content);
-      infoWindow.open(map, e.target.getPosition());
-      that.markerInfoWindow = infoWindow;
-    }
-  }
-
+    e.target.infoWindow.setContent(e.target.content);
+    e.target.infoWindow.open(map, e.target.getPosition());
+    this.markerInfoWindow = e.target.infoWindow;
+  };
   /**
    * marker添加拖拽事件
    */
@@ -454,7 +465,7 @@ class gaodeMap {
    * 添加折线
    * @param path
    */
-  addPolyline(arr) {
+  addPolyline(arr, func) {
     // this` polyLines = [];
     console.log("包装的数组", arr);
     for (let i = 0; i < arr.length; i++) {
@@ -480,8 +491,13 @@ class gaodeMap {
           lineData: item
         }
       });
-
+        // 如果是修改后包装，有记录的index 就在原位置插入，如果没有，就直接在最后插入
+      if (this.changePolineListNum===null) {
         this.polyLines.push(polyline);
+      }else{
+        this.polyLines.splice(this.changePolineListNum,0,polyline);
+        this.changePolineListNum=null;
+      }
       // 信息窗体
       const dom = createPop(lineInfoWindow, {
         obj: { a: 123, editorPage: true, ...item, polyline }
@@ -510,9 +526,29 @@ class gaodeMap {
       this.newLineAddEvent(polyline);
       polyline.infoWindow = infoWindow;
       //添加事件
-      polyline.on("mouseover", e => {
+      polyline.on("mouseover", this.polylineMouseOver);
+      polyline.on("mouseout", e => {
+        polyline.setOptions({ strokeColor: "#F7FE38" });
+        // infoWindow.close();
+      });
+      // 计算info的位置
+      // function infoPosition() {}
+    }
+    map.add(this.polyLines);
+    if (func) {
+      func();
+    }
+    // 缩放地图到合适的视野级别
+    // map.setFitView();
+  }
+  // 鼠标移入管道
+  polylineMouseOver = e => {
+    let polyline = e.target;
     if (this.lineType == 1) return;
     // 上方导航的高
+    let X = 20,
+      Y = -20;
+    if (e.originEvent) {
       const topBar = 81;
       // 坐标导航的宽
       const leftBar = 100;
@@ -523,10 +559,10 @@ class gaodeMap {
       } = document.body;
       // 弹出的信息窗口的宽高
 
-        const {
-          offsetWidth: infoWindowWidth,
-          offsetHeight: infoWindowHeight
-        } = { offsetWidth: 406, offsetHeight: 316 };
+      const { offsetWidth: infoWindowWidth, offsetHeight: infoWindowHeight } = {
+        offsetWidth: 406,
+        offsetHeight: 316
+      };
       // 鼠标碰到线后的位置
       const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
       // 鼠标到左边界的距离
@@ -537,8 +573,7 @@ class gaodeMap {
       const offsetBottomY = windowClientHeight - mouseClientY;
 
       const offsetY = mouseClientY - 80 - infoWindowHeight;
-        let X = 20,
-          Y = -20;
+
       if (offsetLeftX <= infoWindowWidth) {
         console.log("靠左了");
         X = 20;
@@ -554,24 +589,16 @@ class gaodeMap {
         Y = -infoWindowHeight - 20;
       }
       polyline.setOptions({ strokeColor: "#FF5A67" });
-        infoWindow.setOffset(new AMap.Pixel(X, Y));
-        infoWindow.open(map, e.lnglat);
+    }
+
+    polyline.infoWindow.setOffset(new AMap.Pixel(X, Y));
+    polyline.infoWindow.open(map, e.lnglat);
     // polyline.infoWindow=infoWindow;
-        this.showInfoWindow = infoWindow;
+    this.showInfoWindow = polyline.infoWindow;
 
     // const
-      });
-      polyline.on("mouseout", e => {
-        polyline.setOptions({ strokeColor: "#F7FE38" });
-        // infoWindow.close();
-      });
-      // 计算info的位置
-      // function infoPosition() {}
-    }
-    map.add(this.polyLines);
-    // 缩放地图到合适的视野级别
-    // map.setFitView();
-  }
+  };
+
   // 创建一条新的线
   createNewLine() {
     map.remove(this.markerOverlays);
@@ -767,20 +794,22 @@ class gaodeMap {
   }
 
   // 传进组件的会调 点确认的时候调
-  lineOkCallBack(target, data) {
+  lineOkCallBack(target, data, func) {
     target.polyEditor.close();
     const index = this.polyLines.indexOf(target);
     // 如果是老线，就要线删除原来的，然后重新包装一遍
     if (index >= 0) {
+      // 记录当前位置的元素
+      this.changePolineListNum = index;
       this.polyLines.splice(index, 1);
     }
     console.log("data999-=================>传回来的data", data);
-    this.addPolyline([data]);
+    this.addPolyline([data], func);
     map.remove(target);
+
     // console.log('polyLines',this.polyLines)
   }
   // 上传服务器用的组件
-
   infoWindowPipelineView(options) {
     // const {} =options;
     const notice = createPop(pipelineView, {

gassafety-web/src/views/device/map/index.vue

@@ -94,7 +94,11 @@
       </div>
     </div> -->
 
-    <div ref="drawer" class="drawer" :class="{ back: backFlag,opacity: drawerOpacity }">
+    <div
+      ref="drawer"
+      class="drawer"
+      :class="{ back: backFlag, opacity: drawerOpacity }"
+    >
       <div class="switch" @click="backFlag = !backFlag">
         <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
         <img v-else src="@/assets/images/r.png" alt="" />
@@ -169,7 +173,7 @@
                         :class="{ topActive: index == 0 }"
                         v-for="(iten, index) in item.list"
                         :key="iten.deviceId + `` + index"
-                        @mousedown.stop="panToo(iten, item)"
+                        @click.stop="panToo(iten, item)"
                       >
                         <div class="no">{{ iten.no + 1 }}</div>
                         <div :title="iten.code" class="code">
@@ -181,31 +185,7 @@
                       </div>
                     </div>
                   </template>
-                  <!-- 值班人员 展示不太一样-->
-                  <template v-else-if="item.value == 9">
-                    <div class="list-wrapper">
-                      <div class="thead">
-                        <div class="no">序号</div>
-                        <div class="code">人员姓名</div>
-                        <div class="name">联系电话</div>
-                      </div>
-                      <div
-                        class="deviceList"
-                        :class="{ topActive: index == 0 }"
-                        v-for="(iten, index) in item.list"
-                        :key="iten.deviceId + `` + index"
-                        @click.stop="panToo(iten, item)"
-                      >
-                        <div class="no">{{ iten.no + 1 }}</div>
-                        <div :title="iten.userName" class="code">
-                          {{ iten.userName }}
-                        </div>
-                        <div :title="iten.userPhone" class="name">
-                          {{ iten.userPhone ? iten.userPhone : "-" }}
-                        </div>
-                      </div>
-                    </div>
-                  </template>
+
                   <!-- 翻页 -->
                   <div class="goback">
                     <div class="btn-w">
@@ -258,7 +238,7 @@ export default {
       backFlag: true,
       // 抽屉内的滚动条的高需要赋值赋值
       boxHeight: "",
-      drawerOpacity:false,
+      drawerOpacity: false,
       // 左边的bar的active判定
       leftBarNum: [1, 2, 3, 4, 7],
       // 右转箭头的样式active判定
@@ -273,33 +253,44 @@ export default {
           value: 1,
           icon: "icon-gd",
           label: "管道",
+          nowPage: 1,
+          maxPage: 99,
           list: [],
         },
         {
           value: 2,
           icon: "icon-tyx",
           label: "调压箱",
+          nowPage: 1,
+          maxPage: 99,
           list: [],
         },
         {
           value: 3,
           icon: "icon-fmj",
           label: "阀门井",
+          nowPage: 1,
+          maxPage: 99,
           list: [],
         },
         {
           value: 4,
           icon: "icon-llj",
           label: "流量计",
+          nowPage: 1,
+          maxPage: 99,
           list: [],
         },
         {
           value: 7,
           icon: "icon-ylb",
           label: "压力表",
+          nowPage: 1,
+          maxPage: 99,
           list: [],
         },
       ],
+      allList: [[], [], [], [], []],
       keyWord: "",
     };
   },
@@ -308,15 +299,16 @@ export default {
     this.boxHeight = document.body.clientHeight - 81;
   },
   methods: {
-    initMap() {
+    async initMap() {
       let gaoMap = new gaodeMap("石家庄");
       this.gaoMap = gaoMap;
       this.gaoMap.view = this;
       window.addEventListener("click", this.barClose);
       gaoMap.addMouseTool();
       gaoMap.searchTips("tipinput");
-      this.getDeviceInfo();
-      this.getPipeList();
+      await this.getDeviceInfo();
+      await this.getPipeList();
+      this.pipeList();
     },
     // 左边的Bar修改值
     leftBarChange(item) {
@@ -327,6 +319,7 @@ export default {
         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);
@@ -476,8 +469,9 @@ export default {
     },
     getDeviceInfo(queryParams) {
       this.loading = true;
-      getAllDeviceInfo(queryParams).then((response) => {
+      return getAllDeviceInfo(queryParams).then((response) => {
         if (response.code == 200) {
+          this.deviceClassify(response.data);
           for (var i = 0; i < response.data.length; i++) {
             if ("1" == response.data[i].deviceType) {
               this.gaoMap.addMarker(
@@ -500,9 +494,10 @@ export default {
       });
     },
     getPipeList(queryParams) {
-      pipeAllInfoList(queryParams).then((res) => {
+      return pipeAllInfoList(queryParams).then((res) => {
         console.log("管道", res);
         if (res.code == 200) {
+          this.pipeClassify(res.data);
           this.gaoMap.addPolyline(res.data);
         }
       });
@@ -576,6 +571,199 @@ export default {
         this.arrowRightNum.push(item.value);
       }
     },
+
+    // 管道储存
+    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",
+          deviceName: item.pipeName,
+          code: item.pipeCode,
+        };
+      });
+      this.allList[0] = pipeArr;
+      console.log("管道管道管道管道", pipeArr);
+    },
+    // 设备分类存储
+    deviceClassify(data) {
+      // 所有调压箱数据
+      const tyxArr = data
+        .filter((item) => {
+          return item.deviceType == 1;
+        })
+        .map((item, index) => {
+          return {
+            path: [item.longitude, item.latitude],
+            no: index,
+            deviceId: item.deviceId,
+            deviceType: item.deviceType,
+            deviceName: item.deviceName,
+            code: item.iotNo,
+          };
+        });
+      // 所有阀门井数据
+      const fmjArr = data
+        .filter((item) => {
+          return item.deviceType == 2;
+        })
+        .map((item, index) => {
+          return {
+            path: [item.longitude, item.latitude],
+            no: index,
+            deviceId: item.deviceId,
+            deviceType: item.deviceType,
+            deviceName: item.deviceName,
+            code: item.iotNo,
+          };
+        });
+      // 所有流量计数据
+      const lljArr = data
+        .filter((item) => {
+          return item.deviceType == 3;
+        })
+        .map((item, index) => {
+          return {
+            path: [item.longitude, item.latitude],
+            no: index,
+            deviceId: item.deviceId,
+            deviceType: item.deviceType,
+            deviceName: item.deviceName,
+            code: item.iotNo,
+          };
+        });
+      // 所有压力表数据
+      const ylbArr = data
+        .filter((item) => {
+          return item.deviceType == 4;
+        })
+        .map((item, index) => {
+          return {
+            path: [item.longitude, item.latitude],
+            no: index,
+            deviceId: item.deviceId,
+            deviceType: item.deviceType,
+            deviceName: item.deviceName,
+            code: item.iotNo,
+          };
+        });
+      // console.log("设备", tyxArr, fmjArr, lljArr, ylbArr);
+      this.allList[1] = tyxArr;
+      this.allList[2] = fmjArr;
+      this.allList[3] = lljArr;
+      this.allList[4] = ylbArr;
+    },
+    // 左边设备翻页
+    pipeList(pageNum) {
+      const num = pageNum ? pageNum : 10;
+      // const { nowPage } = this.changeBtnData[0];
+      // this.changeBtnData[0].list = this.allList[0].filter((item, index) => {
+      //   return index >= (nowPage - 1) * num && index < nowPage * num;
+      // });
+      // console.log(this.changeBtnData[0], this.allList[0]);
+      console.log("this.allList[0]", this.allList[0]);
+      this.changeBtnData.forEach((item, index) => {
+        // console.log("=======", index, this.allList[index]);
+        if (this.allList[index]?.length > 0) {
+          console.log("大于0");
+          item.list = this.allList[index].filter((item2, index2) => {
+            return (
+              index2 >= (item.nowPage - 1) * num && index2 < item.nowPage * num
+            );
+          });
+          item.maxPage = Math.ceil(this.allList[index].length / num);
+        } else {
+          // 如果为空，就直接把item.list写成[];
+          item.list = [];
+        }
+      });
+    },
+    pageBack(item) {
+      item.nowPage--;
+      this.pipeList();
+    },
+    pageGo(item) {
+      item.nowPage++;
+      this.pipeList();
+    },
+    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) {
+        // 工作人员
+        // this.workerManInfoWindowShow(iten, lat, lng);
+      } else if (item.value == 8) {
+        // this.trouleInfoWindowShow(iten, lat, lng);
+      } 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);
+      };
+    },
   },
 
   beforeDestroy() {
@@ -778,37 +966,37 @@ input[type="radio"] {
   padding: 0;
   margin: 0 0.5rem 0 0;
 }
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border: 1px solid transparent;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  background-color: transparent;
-  background-image: none;
-  color: #25a5f7;
-  border-color: #25a5f7;
-  padding: 0.25rem 0.5rem;
-  line-height: 1.5;
-  border-radius: 1rem;
-  -webkit-appearance: button;
-  cursor: pointer;
-  width: 6rem;
-  margin: 0 1rem 0 2rem;
-}
+// .btn {
+//   display: inline-block;
+//   font-weight: 400;
+//   text-align: center;
+//   white-space: nowrap;
+//   vertical-align: middle;
+//   -webkit-user-select: none;
+//   -moz-user-select: none;
+//   -ms-user-select: none;
+//   user-select: none;
+//   border: 1px solid transparent;
+//   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+//     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+//   background-color: transparent;
+//   background-image: none;
+//   color: #25a5f7;
+//   border-color: #25a5f7;
+//   padding: 0.25rem 0.5rem;
+//   line-height: 1.5;
+//   border-radius: 1rem;
+//   -webkit-appearance: button;
+//   cursor: pointer;
+//   width: 6rem;
+//   margin: 0 1rem 0 2rem;
+// }
 
-.btn:hover {
-  color: #fff;
-  background-color: #25a5f7;
-  border-color: #25a5f7;
-}
+// .btn:hover {
+//   color: #fff;
+//   background-color: #25a5f7;
+//   border-color: #25a5f7;
+// }
 .input-text {
   width: 4rem;
   margin-right: 1rem;
@@ -847,7 +1035,7 @@ input[type="radio"] {
   background: #fff;
   // background: red;
   opacity: 0;
-  &.opacity{
+  &.opacity {
     opacity: 1;
   }
   &.back {

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

@@ -506,7 +506,7 @@ export default {
     },
     // 隐患
     getMapHiddenTroublelist(queryParams) {
-      return getMapHiddenTroublelist().then((res) => {
+      return getMapHiddenTroublelist(queryParams).then((res) => {
         console.log(res);
         if (res.code == 200) {
           this.troubleClassify(res.data);
@@ -1206,6 +1206,8 @@ export default {
         await this.getPipeList({ pipeName: this.keyWord });
         // 值班人员
         await this.getInspectorLocations({ userName: this.keyWord });
+        await this.getMapHiddenTroublelist({ troubleName: this.keyWord });
+
 
         // 设备报警
         this.getSelectAlarmDevice();
@@ -1242,13 +1244,16 @@ export default {
       // this.gaoMap.createNewLine();
     },
     refreshMap() {
+      // this.changeBtnDataClear();
+      this.keyWord="";
+      this.arrowRightNum=[];
       this.iconClass = "icon-create";
       this.createValue = 0;
       this.createLabel = "新建";
       this.targetNum = 0;
       map.clearMap();
-      this.initMap();
       this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
+      this.initMap();
     },
     // 改变工单弹框状态
     // openChange(bool) {