Merge remote-tracking branch 'origin/master'

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

@@ -2,7 +2,9 @@
   <div class="wrapper">
     <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text ddd" :title="data.deviceName">{{ data.deviceName }}</div>
+      <div class="left text ddd" :title="data.deviceName">
+        {{ data.deviceName }}
+      </div>
       <div class="right text">
         <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
@@ -15,7 +17,9 @@
             设备类型：<span>{{ title ? title : "-" }}</span>
           </div>
           <div class="eq-text">
-            设备型号：<span>{{ data.deviceModel ? data.deviceModel : "-"  }}</span>
+            设备型号：<span>{{
+              data.deviceModel ? data.deviceModel : "-"
+            }}</span>
           </div>
           <div class="eq-text">
             所属管道：<span>{{ data.pipeName ? data.pipeName : "-" }}</span>
@@ -48,11 +52,11 @@
 
         <div>
           <span>设备所在地址：</span>
-          <span>{{ data.pipeAddr ? data.pipeAddr : "-"}}</span>
+          <span>{{ data.pipeAddr ? data.pipeAddr : "-" }}</span>
         </div>
         <div>
           <span>备注信息：</span>
-          <span>{{ data.remarks ? data.remarks : "-"}} </span>
+          <span>{{ data.remarks ? data.remarks : "-" }} </span>
         </div>
       </div>
     </div>
@@ -63,12 +67,52 @@
         <div>报警状态：<span>报警</span></div>
         <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
       </div> -->
-      <template v-if="data.deviceType ==3 || data.deviceType==4">
-        <div v-if="data.deviceType==3" class="windowwarn-content" style="
+
+      <template v-if="data.deviceType == 1 || data.deviceType == 2">
+        <div class="windowwarn-content tab" v-if="list.length > 0">
+          <div class="foot">
+            <div class="thead flex">
+              <div class="first">设备名称</div>
+              <div>设备状态</div>
+              <div>设备浓度</div>
+              <div>报警状态</div>
+            </div>
+            <template v-if="list.length > 0">
+              <div
+                class="tbody flex"
+                v-for="deviceData in list"
+                :key="deviceData.a"
+              >
+                <div class="first zzz">
+                  {{ deviceData.a || "-" }}
+                </div>
+                <div class="">
+                  {{ deviceData.b || "-" }}
+                </div>
+                <div class="">
+                  {{ deviceData.c || "-" }}
+                </div>
+                <div class="">
+                  {{ deviceData.d || "-" }}
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div v-else class="windowwarn-content tab nomal">暂无设备</div>
+      </template>
+      <!-- 流量计与压力表 -->
+      <template v-if="data.deviceType == 3 || data.deviceType == 4">
+        <div
+          v-if="data.deviceType == 3"
+          class="windowwarn-content"
+          style="
             border-bottom: 1px solid #e2e2e2;
             padding: 10px 0 2px 22px;
-          height: 150px;padding-bottom: 2px;
-          ">
+            height: 150px;
+            padding-bottom: 2px;
+          "
+        >
           <el-col :span="12">
             <div class="windowwarn">
               标况累积量：<span class="standardConditionAccumulation">-</span>
@@ -100,9 +144,7 @@
             </div>
           </el-col>
           <el-col :span="12">
-            <div class="windowwarn">
-              压力：<span class="pressure">-</span>
-            </div>
+            <div class="windowwarn">压力：<span class="pressure">-</span></div>
           </el-col>
           <el-col :span="15">
             <div class="windowwarn">
@@ -110,15 +152,18 @@
             </div>
           </el-col>
         </div>
-        <div v-if="data.deviceType==4" class="windowwarn-content" style="
+        <div
+          v-if="data.deviceType == 4"
+          class="windowwarn-content"
+          style="
             border-bottom: 1px solid #e2e2e2;
             padding: 10px 0 2px 22px;
-          height: 70px;padding-bottom: 2px;
-          ">
+            height: 70px;
+            padding-bottom: 2px;
+          "
+        >
           <el-col :span="24">
-            <div class="windowwarn">
-              压力：<span class="pressure">-</span>
-            </div>
+            <div class="windowwarn">压力：<span class="pressure">-</span></div>
           </el-col>
           <el-col :span="24">
             <div class="windowwarn">
@@ -128,7 +173,6 @@
         </div>
       </template>
 
-
       <div class="btn">
         <span @mousedown.stop="deviceMore">
           <el-button class="elbtn" type="primary">设备详情</el-button>
@@ -140,11 +184,11 @@
 </template>
 
 <script>
-  let closeInfoWindowTimer = null;
-  import { getWindowData } from "@/api/dataMonitoring/reportData";
-  import moment from "moment";
-  //line移入时的的infowindow
-  export default {
+let closeInfoWindowTimer = null;
+import { getWindowData } from "@/api/dataMonitoring/reportData";
+import moment from "moment";
+//line移入时的的infowindow
+export default {
   props: {
     obj: { typs: Object },
     title: "",
@@ -155,27 +199,30 @@
     return {
       deviceId: "",
       alarm: {},
-      }
+      list: [
+        { a: "我我我我我我我", b: 2, c: 3, d: 4 },
+        { a: "我我我我我我我", b: 2, c: 3, d: 4 },
+        { a: "我我我我我我我", b: 2, c: 3, d: 4 },
+      ],
+    };
   },
   mounted() {
     clearInterval(this.data.class.view.deviceTimer);
 
-
     if (this.data.deviceType == 3 || this.data.deviceType == 4) {
       this.getDataid();
       this.data.class.view.deviceTimer = setInterval(this.getDataid, 5000);
 
       closeInfoWindowTimer = setInterval(() => {
-          const dom= document.getElementsByClassName("amap-info")[0];
-          const disPlay =dom?.style.display;
+        const dom = document.getElementsByClassName("amap-info")[0];
+        const disPlay = dom?.style.display;
         if (!dom || (dom && disPlay == "none")) {
-            clearInterval(this.data.class.view.deviceTimer)
-            clearInterval(closeInfoWindowTimer)
-            console.log("请求关闭")
+          clearInterval(this.data.class.view.deviceTimer);
+          clearInterval(closeInfoWindowTimer);
+          console.log("请求关闭");
         }
-        }, 1000)
+      }, 1000);
     }
-
   },
   methods: {
     moment,
@@ -190,58 +237,112 @@
       });
     },
     getDataid() {
-        getWindowData(this.data.deviceId).then(response => {
-          this.changeValue(response.data)
-
-        })
+      getWindowData(this.data.deviceId).then((response) => {
+        this.changeValue(response.data);
+      });
     },
     changeValue(data) {
       const keyArr = Object.keys(data);
       keyArr.forEach((item) => {
-          const dw = this.danwei(item)
+        const dw = this.danwei(item);
         const dom = document.getElementsByClassName(item)[0];
         if (dom) {
-            dom.innerHTML = data[item] +"&nbsp"+ dw;
+          dom.innerHTML = data[item] + "&nbsp" + dw;
         }
-        })
+      });
     },
     danwei(item) {
-        let dw='';
-        if(item =='standardConditionAccumulation' || item == 'workingConditionAccumulation' || item == 'residualQuantity'){
-          dw="m³"
-        }else if(item =='standardConditionFlow'|| item == 'workingConditionFlow'){
-          dw="m³/h"
-        }else if(item =='temperature'){
-          dw="℃"
-        }else if(item == 'pressure'){
-          dw="KPa"
-        }else if(item == 'reportTime'){
-          dw=" "
+      let dw = "";
+      if (
+        item == "standardConditionAccumulation" ||
+        item == "workingConditionAccumulation" ||
+        item == "residualQuantity"
+      ) {
+        dw = "m³";
+      } else if (
+        item == "standardConditionFlow" ||
+        item == "workingConditionFlow"
+      ) {
+        dw = "m³/h";
+      } else if (item == "temperature") {
+        dw = "℃";
+      } else if (item == "pressure") {
+        dw = "KPa";
+      } else if (item == "reportTime") {
+        dw = " ";
       }
       return dw;
-      } ,
+    },
     close() {
       this.map.clearInfoWindow();
-        this.data.class.view.domAllShow()
+      this.data.class.view.domAllShow();
     },
   },
-  };
+};
 </script>
 
 <style lang="scss" scoped>
-  .windowwarn-content {
+.windowwarn-content {
+  &.tab {
+    border-bottom: 1px solid #e2e2e2;
+    padding: 10px 5px 2px 5px;
+    max-height: 150px;
+    padding-bottom: 5px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      display: none; /* Chrome Safari */
+    }
+    .foot {
+      color: #ffffff;
+      .thead,
+      .tbody {
+        display: flex;
+        border: 1px solid #cccccc;
+        border-right: none;
+        div {
+          font-size: 12px !important;
+          flex: 1;
+          text-align: left;
+          border-right: 1px solid #cccccc;
+          box-sizing: border-box;
+          padding: 0 5px;
+        }
+        .first {
+          flex: 1;
+          font-size: 12px !important;
+
+        }
+        .last {
+          border-right: none;
+        }
+      }
+      .tbody {
+        border-top: none;
+      }
+      .thead {
+        div {
+          background-color: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+  // 无设备的样式
+  &.nomal {
+    text-align: center;
+    padding-bottom: 10px;
+  }
   div {
     font-size: 14px;
     font-wwight: 400;
-
     .windowwarn {
       margin-bottom: 7px;
     }
   }
-  }
+}
 
-  .wrapper {
-    width: 406px;
+.wrapper {
+  // width: 406px;
+  width: 460px;
   max-height: 600px;
   // background: #fff;
   border-radius: 4px;
@@ -316,7 +417,7 @@
       .text-wrapper {
         padding-top: 1px;
 
-          &>div {
+        & > div {
           margin-bottom: 6px;
         }
 
@@ -327,7 +428,7 @@
           color: #fff;
           opacity: 1;
 
-            &>span {
+          & > span {
             vertical-align: top;
             display: inline-block;
             // white-space: nowrap;
@@ -363,7 +464,7 @@
     box-sizing: border-box;
 
     // border-bottom: 1px solid #e2e2e2;
-      &>div {
+    & > div {
       margin-bottom: 8px;
       font-size: 14px;
       font-weight: 400;
@@ -384,7 +485,7 @@
       border-bottom: 1px solid #e2e2e2;
       color: #fe5966;
 
-        &>div {
+      & > div {
         font-size: 14px;
         font-weight: 400;
         margin-bottom: 8px;
@@ -403,12 +504,13 @@
       }
     }
   }
-  }
+}
 
-  .wrapperEditorPage {}
+.wrapperEditorPage {
+}
 
-  .display-default {
+.display-default {
   display: flex;
   justify-content: space-between;
-  }
+}
 </style>
\ No newline at end of file

gassafety-web/src/utils/gaodeMapView.js

@@ -425,13 +425,15 @@ class gaodeMap {
       });
     }
 
-    // 如果这个值为false说明不是workerpoint，就push进去
+    // 如果这个值为false说明不是workerpoint，就push进去 或者不是值班人员就让他缩放
     if (!marker.workerPoint) {
       this.markers.push(marker);
+      // 如果是值班人员也不缩放
+      if (markerType != DEVICE_TYPE.INSPECTOR) {
         map.setZoom("13");
       }
+    }
     //map.setFitView();
-
     function infoClose(e) {
       let options = map.getStatus();
       options.scrollWheel = true;
@@ -443,6 +445,30 @@ class gaodeMap {
 
     return marker;
   }
+  // 删除地图上marker 跟数组里的marker
+  removeMarker(type) {
+    // 获取过滤出来的marker
+    // 如果打开的是档期那type人员，就清空infowindow
+    if(this.markerType == type){
+      this.closeInfoWindow()
+    }
+    const newOriginMaker = this.markers.filter(item => {
+      console.log(item.markerType)
+      return item.markerType == type;
+    });
+    newOriginMaker.forEach(item => {
+      this.myMap.remove(item)
+    });
+    console.log(newOriginMaker);
+    newOriginMaker.forEach(item => {
+      const index = this.markers.findIndex(
+        iten => iten.getExtData().deviceType == type
+      );
+      if (index < 0) {
+        this.markers.splice(index, 1);
+      }
+    });
+  }
   // 值班人员
   wokerManOpen = e => {
     this.markerType = e.target.markerType;

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

@@ -630,6 +630,7 @@ export default {
     setInspectorLocationsInterval(){
       // 设置定时器，5s执行一次
       let timer = setInterval(() => {
+        this.gaoMap.removeMarker(DEVICE_TYPE.INSPECTOR);
         this.getInspectorLocations();
       }, 10000);