管道根据压力过滤

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',
     });
@@ -351,7 +351,7 @@ class gaodeMap {
       //infoWindow.close(map, e.target.getPosition());
     }
     if (func) {
-      if(func != "false"){
+      if (func != "false") {
         func();
       }
     }
@@ -611,6 +611,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);
@@ -814,10 +834,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 +943,7 @@ class gaodeMap {
         });
       });
   }
+
   // 关闭所有已经上传的线的编辑状态
   linePolyEditorAllClose() {
     this.polyLines.forEach(item => {

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,18 +682,22 @@ 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",
-          deviceName: item.pipeName,
-          code: item.pipeCode,
-        };
-      });
+      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],
+            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);
     },
@@ -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;
               // 报警信息
@@ -758,17 +786,17 @@ export default {
               this.audio();
               polyline.setOptions({ strokeColor: "#ff0000" });
               options.lineData.alarmState = 1;
-              // 报警类型 
+              // 报警类型
               options.lineData.alarmType = alarmType;
               // 报警信息
               options.lineData.alarmValue = alarmValue;
               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,22 +1264,26 @@ 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",
-          deviceName: item.pipeName,
-          code: item.pipeCode,
-          alarmState: item.alarmState ? item.alarmState : "0",
-          selfData: item,
-        };
-      });
+      // 根据选择的管道压力过滤一下
+      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],
+            path: eval(item.coordinates)[1],
+            no: index,
+            deviceId: item.pipeId,
+            deviceType: "0",
+            deviceName: item.pipeName,
+            code: item.pipeCode,
+            alarmState: item.alarmState ? item.alarmState : "0",
+            selfData: item,
+          };
+        });
       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 {