Merge branch 'develop_jzl'

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

@@ -189,6 +189,7 @@ export default {
         pipeName: "",
         pipeType: "1",
         pipePressure: "1",
+        pipeLength:"",
         iconUrl: "",
       },
       dialogVisible: false,
@@ -235,6 +236,7 @@ export default {
   },
   created() {
     console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
+    this.editForm.pipeLength=parseInt(this.pipeLength);
     if (this.lineData?.pipeId) {
       this.editForm = { ...this.lineData };
     } else {

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

@@ -154,10 +154,10 @@ export default {
     },
     radioChange(e) {
       if (e == 1) {
-        this.formData.beginTime = moment().format("YYYY-MM-DD HH:mm:ss");
-        this.formData.endTime = moment()
-          .add(2, "h")
+        this.formData.beginTime = moment()
+          .subtract(2, "h")
           .format("YYYY-MM-DD HH:mm:ss");
+        this.formData.endTime = moment().format("YYYY-MM-DD HH:mm:ss");
       } else if (e == 2) {
         this.formData.beginTime = moment().format("YYYY-MM-DD HH:mm:ss");
         this.formData.endTime = moment()

gassafety-web/src/utils/gaodeMap.js

 import createPop from "./createPop";
-import { lineColor,mapStyle } from "./mapCommon.js";
+import { lineColor, mapStyle } from "./mapCommon.js";
 import regulatorBox from "../components/PopWindow/regulatorBox.vue";
 import valveWell from "../components/PopWindow/valveWell.vue";
 import flowMeter from "../components/PopWindow/flowMeter.vue";
@@ -43,7 +43,7 @@ class gaodeMap {
   leftListClick = false;
 
   //构造函数中设置中央点默认值
-  constructor(center, latlng,containerId) {
+  constructor(center, latlng, containerId) {
     let container = containerId ? containerId : "container";
     this.markers = [];
     this.center = center ? center : defaultCenter;
@@ -57,7 +57,7 @@ class gaodeMap {
       // labelzIndex: 110,
       pitch: 8,
       zoom: 12,
-      mapStyle,
+      mapStyle
       // mapStyle: 'amap://styles/darkblue',
       // mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
     });
@@ -101,6 +101,24 @@ class gaodeMap {
       this.closeInfoWindow();
       this.polyLinesColorClear();
     });
+    // 鼠标在地图上移动
+    this.myMap.on("mousemove", e => {
+      if (this.mouseTool.overlays.polyline.length > 0) {
+        const arr = this.mouseTool.overlays.polyline;
+        const length = parseInt(arr[0].getLength());
+        if (this.lengthMarker) {
+          this.myMap.remove(this.lengthMarker);
+        }
+        const position = e.lnglat;
+        this.lengthMarker = new AMap.Marker({
+          map: map,
+          position,
+          content: `<div style="color:#000;font-size:14px;display:inline-block;background:#fff;white-space:nowrap;padding:2px 5px;">
+          管道长度:<span>${length}米</span><div>`,
+          offset: new AMap.Pixel(20, 20)
+        });
+      }
+    });
     this.myMap.on("moveend", () => {
       if (this.handleInfoWindowOpenFunc) {
         this.handleInfoWindowOpenFunc();
@@ -351,7 +369,7 @@ class gaodeMap {
       //infoWindow.close(map, e.target.getPosition());
     }
     if (func) {
-      if(func != "false"){
+      if (func != "false") {
         func();
       }
     }
@@ -611,6 +629,26 @@ class gaodeMap {
     // 缩放地图到合适的视野级别
     // map.setFitView();
   }
+  // 根据压力过滤管道
+  pipePressureFilter(pipePressureArr, func) {
+    this.polyLines.forEach(item => {
+      const ind =
+        pipePressureArr.indexOf(+item.getExtData().lineData.pipePressure) >= 0;
+      // 根据压力过滤出来的显示，过滤掉的管道隐藏
+      if (ind) {
+        item.show();
+      } else {
+        item.hide();
+      }
+    });
+    // 改变数据类型
+    const newArr = this.polyLines.map(item => {
+      return item.getExtData().lineData;
+    });
+    if (func) {
+      func(newArr);
+    }
+  }
   // 鼠标移入管道
   polylineMouseOver = e => {
     console.log(e.type);
@@ -731,13 +769,19 @@ class gaodeMap {
   createNewLine() {
     map.remove(this.markerOverlays);
     console.log("创造一条线了啊");
+    // 线测距
+    map.plugin(["AMap.MouseTool"], () => {
+      this.ruler = new AMap.RangingTool(map);
+      this.ruler.turnOn();
+      // console.log(this.ruler.)
+    });
     this.mouseTool.polyline({
       // bubbles:false,
       strokeWeight: 4,
       strokeColor: "#80d8ff",
       extData: {
         type: "newLine",
-        //当前line状态 0:正常状态 1:正在编辑状态
+        //当前line状态 0:正常状态 1:正在编辑状态
         isState: 0
       }
       //同Polyline的Option设置
@@ -750,6 +794,9 @@ class gaodeMap {
     this.lineFlag = false;
     if (this.mouserTool) {
       this.mouseTool.close();
+      if (this.lengthMarker) {
+        this.myMap.remove(this.lengthMarker);
+      }
     }
     if (this.newLineObj) {
       this.newLineObj.polyEditor.close();
@@ -814,10 +861,15 @@ class gaodeMap {
     });
   }
   // 隐藏所有管道
-  lineShow(bool) {
+  lineShow(bool, pipePressureArr) {
+    const filterArr = this.polyLines.filter(
+      item =>
+        pipePressureArr.indexOf(+item.getExtData().lineData.pipePressure) >= 0
+    );
+    // 然后过滤出来的管道才会显示隐藏
     bool
-      ? this.polyLines.forEach(item => item.show())
-      : this.polyLines.forEach(item => item.hide());
+      ? filterArr.forEach(item => item.show())
+      : filterArr.forEach(item => item.hide());
     if (this.newLineObj) {
       bool ? this.newLineObj.show() : this.newLineObj.hide();
     }
@@ -918,6 +970,7 @@ class gaodeMap {
         });
       });
   }
+
   // 关闭所有已经上传的线的编辑状态
   linePolyEditorAllClose() {
     this.polyLines.forEach(item => {
@@ -980,6 +1033,10 @@ class gaodeMap {
     let that = this;
     this.markerOverlays = [];
     this.mouseTool.on("draw", function(e) {
+      // 如果正在测量就删掉
+      if (that.lengthMarker) {
+        that.myMap.remove(that.lengthMarker);
+      }
       if (e.obj.getExtData().type != "newLine") {
         map.remove(that.markerOverlays);
         const device = that.createInfowindow("新增");
@@ -1001,17 +1058,21 @@ class gaodeMap {
         e.obj.on("mouseover", function() {
           that.mouseTool.close();
         });
-
         e.obj.on("mouseout", function() {
           that.draw(that.deviceType);
         });
-
         that.markerOverlays.push(e.obj);
       }
 
       if (e.obj && e.obj.getExtData().type == "newLine") {
         console.log("挂上事件");
+        // that.mouseTool.overlays.polyLine = [];
+        // 清空当前算距离用的内部数组
+        that.mouseTool.overlays.polyline = [];
         that.newLineAddEvent(e.obj);
+        // 测距结束
+        that.ruler.turnOff(true);
+        // console.log(e.obj)
         e.obj.on("mouseover", () => {
           e.obj.setOptions({ strokeColor: "#F7FE38" });
         });
@@ -1021,9 +1082,11 @@ class gaodeMap {
         // 记录这条线
         // console.log(e.obj.getPath().length)
         // 如果只有一个点，并没有连成线的时候就不close 大于一个点的时候才执行clse
-        console.log(that.lineType);
+        // console.log(that.lineType);
         if (e.obj.getPath().length > 1) {
           that.newLineObj = e.obj;
+
+          that.ruler.turnOff(true);
           that.mouseTool.close();
         } else {
           // that.newLineObj = null;
@@ -1156,6 +1219,9 @@ class gaodeMap {
   closeAddMarker() {
     this.mouseTool.close();
     map.remove(this.markerOverlays);
+    if (this.lengthMarker) {
+      this.myMap.remove(this.lengthMarker);
+    }
   }
   // 只上图没功能
   onlyLine(obj) {

gassafety-web/src/utils/gaodeMapView.js

@@ -573,7 +573,7 @@ class gaodeMap {
           map: map
         });
         const html = dom.$el;
-        console.log("html",html)
+        console.log("html", html);
 
         dom.remove();
         return html;
@@ -943,6 +943,26 @@ class gaodeMap {
     // 缩放地图到合适的视野级别
     // map.setFitView();
   }
+  // 根据压力过滤管道
+  pipePressureFilter(pipePressureArr, func) {
+    this.polyLines.forEach(item => {
+      const ind =
+        pipePressureArr.indexOf(+item.getExtData().lineData.pipePressure) >= 0;
+      // 根据压力过滤出来的显示，过滤掉的管道隐藏
+      if (ind) {
+        item.show();
+      } else {
+        item.hide();
+      }
+    });
+    // 改变数据类型
+    const newArr = this.polyLines.map(item => {
+      return item.getExtData().lineData;
+    });
+    if (func) {
+      func(newArr);
+    }
+  }
   // 鼠标移入线条执行
   polylineMouseOver = e => {
     let polyline = e.target;
@@ -1262,10 +1282,17 @@ class gaodeMap {
     });
   }
   // 隐藏所有管道
-  lineShow(bool) {
+  lineShow(bool, pipePressureArr) {
+    // 把选中的压力过滤出来
+    const filterArr = this.polyLines.filter(
+      item =>
+        pipePressureArr.indexOf(+item.getExtData().lineData.pipePressure) >= 0
+    );
+    // 然后过滤出来的管道才会显示隐藏
+    console.log(filterArr);
     bool
-      ? this.polyLines.forEach(item => item.show())
-      : this.polyLines.forEach(item => item.hide());
+      ? filterArr.forEach(item => item.show())
+      : filterArr.forEach(item => item.hide());
     if (this.newLineObj) {
       bool ? this.newLineObj.show() : this.newLineObj.hide();
     }
@@ -1273,7 +1300,6 @@ class gaodeMap {
   markerShow(type, bool) {
     this.markers.forEach(item => {
       const { deviceType, troubleId } = item.getExtData();
-
       if (type == 8 && troubleId) {
         bool ? item.show() : item.hide();
       } else if (deviceType == type) {

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

@@ -110,21 +110,19 @@
 
       <div class="pipePressure">
         <!-- <div>管道压力</div> -->
-        <div class="hasColorBox" :style="{ color: lineColor[`1`] }">
-          <div :style="{ backgroundColor: lineColor[`1`] }"></div>
-          低压
-        </div>
-        <div class="hasColorBox" :style="{ color: lineColor[`2`] }">
-          <div :style="{ backgroundColor: lineColor[`2`] }"></div>
-          中压
-        </div>
-        <div class="hasColorBox" :style="{ color: lineColor[`3`] }">
-          <div :style="{ backgroundColor: lineColor[`3`] }"></div>
-          次高压
-        </div>
-        <div class="hasColorBox" :style="{ color: lineColor[`4`] }">
-          <div :style="{ backgroundColor: lineColor[`4`] }"></div>
-          高压
+        <div
+          v-for="item in pipeColor"
+          :key="item.value"
+          class="hasColorBox"
+          :style="{ color: lineColor[item.value] }"
+        >
+          <div :style="{ backgroundColor: lineColor[item.value] }"></div>
+          <span
+            :class="{ active: pipePressureArr.indexOf(item.value) >= 0 }"
+            @click="pipePressureArrAdd(item.value)"
+          >
+            {{ item.name }}
+          </span>
         </div>
       </div>
 
@@ -266,7 +264,15 @@ export default {
       // 1新建，2编辑，3删除,点按钮变色
       targetNum: 0,
       lineColor,
-
+      // 管道根据压力值不同的颜色变化
+      pipeColor: [
+        { value: 1, name: "低压" },
+        { value: 2, name: "中压" },
+        { value: 3, name: "次高压" },
+        { value: 4, name: "高压" },
+      ],
+      // 管道压力过滤
+      pipePressureArr: [1, 2, 3, 4],
       backFlag: true,
       // 卫星与全景地图的切换
       mapStyle: true,
@@ -370,9 +376,9 @@ export default {
       console.log(this.leftBarNum);
 
       if (this.leftBarNum.includes(1)) {
-        this.gaoMap.lineShow(true);
+        this.gaoMap.lineShow(true, this.pipePressureArr);
       } else {
-        this.gaoMap.lineShow(false);
+        this.gaoMap.lineShow(false, this.pipePressureArr);
       }
 
       // console.log("marks",this.gaoMap.markers)
@@ -563,6 +569,23 @@ export default {
         }
       });
     },
+    // 管道压力展示选项过滤
+    pipePressureArrAdd(num) {
+      const pipePressIndex = this.pipePressureArr.indexOf(num);
+
+      if (pipePressIndex >= 0) {
+        this.pipePressureArr.splice(pipePressIndex, 1);
+      } else {
+        this.pipePressureArr.push(num);
+      }
+      // console.log(this.pipePressureArr)
+      // 过滤左侧管道
+      this.gaoMap.pipePressureFilter(this.pipePressureArr, this.pipeClassify);
+      // 管道回第一页
+      this.changeBtnData[0].nowPage = 1;
+      // 左侧管道列表改变
+      this.pipeList();
+    },
     searchClear() {
       this.iconClass = "icon-create";
       this.createValue = 0;
@@ -659,7 +682,11 @@ export default {
 
     // 管道储存
     pipeClassify(pipeData) {
-      const pipeArr = pipeData.map((item, index) => {
+      const pipeArr = pipeData
+        .filter((item) => {
+          return this.pipePressureArr.indexOf(+item.pipePressure) >= 0;
+        })
+        .map((item, index) => {
           // console.log( '管道路径',eval(item.coordinates )[0])
           return {
             lnglat: eval(item.coordinates)[0],
@@ -894,8 +921,8 @@ export default {
     window.removeEventListener("resize", this.onResize);
     // 离开的时候清除创建的元素
     let removeElements = document.getElementsByClassName("el-dialog__wrapper");
-    const arr = [...removeElements]
-    for(var i =0;i<arr.length;i++){
+    const arr = [...removeElements];
+    for (var i = 0; i < arr.length; i++) {
       const item = arr[i];
       document.body.removeChild(item);
     }
@@ -1208,6 +1235,23 @@ input[type="radio"] {
         width: 10px;
         height: 10px;
       }
+      & > span {
+        display: inline-block;
+        margin-left: 5px;
+        height: 25px;
+        cursor: pointer;
+        box-sizing: border-box;
+        &:hover {
+          color: #7fc0f8;
+        }
+        &.active {
+          // text-shadow: 0 0 10px #2ee7e7, 0 0 10px #2ee7e7, 0 0 15px #2ee7e7,
+          //   0 0 20px #2ee7e7;
+          // background-color: #053b6a;
+          // border-radius: 10px;
+          border-bottom: 1px solid #2ee7e7;
+        }
+      }
     }
   }
   .scroll {

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

@@ -108,21 +108,20 @@
       <!-- 管道压力 -->
       <div class="pipePressure">
         <!-- <div>管道压力</div> -->
-        <div class="hasColorBox" :style="{ color: lineColor[`1`] }">
-          <div :style="{ backgroundColor: lineColor[`1`] }"></div>
-          低压
-        </div>
-        <div class="hasColorBox" :style="{ color: lineColor[`2`] }">
-          <div :style="{ backgroundColor: lineColor[`2`] }"></div>
-          中压
-        </div>
-        <div class="hasColorBox" :style="{ color: lineColor[`3`] }">
-          <div :style="{ backgroundColor: lineColor[`3`] }"></div>
-          次高压
-        </div>
-        <div class="hasColorBox" :style="{ color: lineColor[`4`] }">
-          <div :style="{ backgroundColor: lineColor[`4`] }"></div>
-          高压
+        <!-- pipeColor -->
+        <div
+          v-for="item in pipeColor"
+          :key="item.value"
+          class="hasColorBox"
+          :style="{ color: lineColor[item.value] }"
+        >
+          <div :style="{ backgroundColor: lineColor[item.value] }"></div>
+          <span
+            :class="{ active: pipePressureArr.indexOf(item.value) >= 0 }"
+            @click="pipePressureArrAdd(item.value)"
+          >
+            {{ item.name }}
+          </span>
         </div>
       </div>
       <div class="switch" @click="backFlag = !backFlag">
@@ -365,6 +364,15 @@ export default {
       value: "",
       operateType: "",
       radio1: "",
+      // 管道根据压力值不同的颜色变化
+      pipeColor: [
+        { value: 1, name: "低压" },
+        { value: 2, name: "中压" },
+        { value: 3, name: "次高压" },
+        { value: 4, name: "高压" },
+      ],
+      // 管道压力过滤
+      pipePressureArr: [1, 2, 3, 4],
       // 1新建，2编辑，3删除,点按钮变色
       targetNum: 0,
       // 左边的bar的active判定
@@ -526,6 +534,23 @@ export default {
         this.$refs.audio.play();
       }
     },
+    // 管道压力展示选项过滤
+    pipePressureArrAdd(num) {
+      const pipePressIndex = this.pipePressureArr.indexOf(num);
+
+      if (pipePressIndex >= 0) {
+        this.pipePressureArr.splice(pipePressIndex, 1);
+      } else {
+        this.pipePressureArr.push(num);
+      }
+      // console.log(this.pipePressureArr)
+      // 过滤左侧管道
+      this.gaoMap.pipePressureFilter(this.pipePressureArr, this.pipeClassify);
+      // 管道回第一页
+      this.changeBtnData[0].nowPage = 1;
+      // 左侧管道列表改变
+      this.pipeList();
+    },
     initMap() {
       let gaoMap = new gaodeMap(process.env.VUE_APP_MAP_CENTER);
       this.gaoMap = gaoMap;
@@ -542,16 +567,16 @@ export default {
       // this.backFlag = false;
 
       let marker = new AMap.Marker({
-        position: [124.736810,45.118425],
+        position: [124.73681, 45.118425],
         map: this.gaoMap.myMap,
-        offset: new AMap.Pixel(5, 19)
+        offset: new AMap.Pixel(5, 19),
       });
       let icon = new AMap.Icon({
         opacity: 0.1,
-        image: require("../../../assets/images/tianqi.png")
+        image: require("../../../assets/images/tianqi.png"),
       });
       marker.setIcon(icon);
-      console.log("==========",marker);
+      console.log("==========", marker);
     },
     // 更改卫星图
     mapChange(num) {
@@ -637,6 +662,7 @@ export default {
         // console.log("管道", res);
         if (res.code == 200) {
           this.gaoMap.addPolyline(res.data);
+          // 根据管道压力过滤
           this.pipeClassify(res.data);
         }
         return res.code;
@@ -703,14 +729,14 @@ export default {
 
       // 过滤报警管道
       const polyLineArr = list.filter((item) => {
-        return item.deviceType == "0" || item.deviceType=="管道";
+        return item.deviceType == "0" || item.deviceType == "管道";
       });
       // 过滤报警的其它设备
       const deviceArr = list.filter((item) => {
-        return item.deviceType != "管道" ;
+        return item.deviceType != "管道";
       });
       // 管道
-      console.log("polyLineArr",polyLineArr)
+      console.log("polyLineArr", polyLineArr);
       if (polyLineArr.length > 0) {
         polyLineArr.forEach((item) => {
           // 获取循报警设备的id
@@ -739,15 +765,17 @@ export default {
             options.lineData.alarmId = alarmId;
             options.lineData.orderId = orderId;
             // dealStatus==4 就是取消报警状态
-            if (endTime || dealStatus==4) {
+            if (endTime || dealStatus == 4) {
               // 判断管道颜色
-              const pipePressureObj = this.gaoMap.polyLines.filter(item=>{
-                return options.lineData.alarmId == item.getExtData().lineData.alarmId;
+              const pipePressureObj = this.gaoMap.polyLines.filter((item) => {
+                return (
+                  options.lineData.alarmId == item.getExtData().lineData.alarmId
+                );
               })[0];
-              const {pipePressure} = pipePressureObj.getExtData().lineData;
+              const { pipePressure } = pipePressureObj.getExtData().lineData;
               polyline.setOptions({ strokeColor: lineColor[pipePressure] });
               options.lineData.alarmState = 0;
-              options.lineData.dealStatus=4
+              options.lineData.dealStatus = 4;
               // 报警类型
               options.lineData.alarmType = null;
               // 报警信息
@@ -765,10 +793,10 @@ export default {
               console.log("管道报警");
             }
             polyline.setExtData(options);
-            console.log("dealStatus",dealStatus)
+            console.log("dealStatus", dealStatus);
             const myP = this.allList[0].filter((item) => {
               console.log(item.selfData.alarmState);
-              return item.selfData.alarmState || item.selfData.dealStatus ==4;
+              return item.selfData.alarmState || item.selfData.dealStatus == 4;
             })[0];
 
             // console.log("this.allList[0]", this.allList[0]);
@@ -971,10 +999,11 @@ export default {
       // 1,2,3,4,7分别对应数据库type5，1，2，3，4
       // console.log(this.leftBarNum);
       if (this.leftBarNum.includes(1)) {
-        this.gaoMap.lineShow(true);
+        this.gaoMap.lineShow(true, this.pipePressureArr);
+        //
         // this.panTo(item);
       } else {
-        this.gaoMap.lineShow(false);
+        this.gaoMap.lineShow(false, this.pipePressureArr);
       }
 
       // console.log("marks",this.gaoMap.markers)
@@ -1235,7 +1264,12 @@ export default {
 
     // 管道储存
     pipeClassify(pipeData) {
-      const pipeArr = pipeData.map((item, index) => {
+      // 根据选择的管道压力过滤一下
+      const pipeArr = pipeData
+        .filter((item) => {
+          return this.pipePressureArr.indexOf(+item.pipePressure) >= 0;
+        })
+        .map((item, index) => {
           // console.log( '管道路径',eval(item.coordinates )[0])
           return {
             lnglat: eval(item.coordinates)[0],
@@ -1250,7 +1284,6 @@ export default {
           };
         });
       this.allList[0] = pipeArr;
-      console.log("管道", pipeArr);
     },
     // 设备分类存储
     deviceClassify(data) {
@@ -1530,7 +1563,7 @@ export default {
     },
     // 搜索
     async search() {
-      this.Clear();
+      this.searchClear();
       map.clearMap();
       this.gaoMap.placeSearch.clear();
       if (!(!this.gaoMap.searchSelectAdcode && !this.gaoMap.searchSelectName)) {
@@ -1904,6 +1937,23 @@ input[type="radio"] {
         width: 10px;
         height: 10px;
       }
+      & > span {
+        display: inline-block;
+        margin-left: 5px;
+        height: 25px;
+        cursor: pointer;
+        box-sizing: border-box;
+        &:hover {
+          color: #7fc0f8;
+        }
+        &.active {
+          // text-shadow: 0 0 10px #2ee7e7, 0 0 10px #2ee7e7, 0 0 15px #2ee7e7,
+          //   0 0 20px #2ee7e7;
+          // background-color: #053b6a;
+          // border-radius: 10px;
+          border-bottom: 1px solid #2ee7e7;
+        }
+      }
     }
   }
   .scroll {