添加单位

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

@@ -69,7 +69,7 @@
           padding: 10px 0 2px 22px;
           height: 150px;padding-bottom: 2px;
           ">
-            <el-col :span="11">
+          <el-col :span="12">
             <div class="windowwarn">
               标况累积量：<span class="standardConditionAccumulation"></span>
             </div>
@@ -79,7 +79,7 @@
               工况累积量：<span class="workingConditionAccumulation"></span>
             </div>
           </el-col>
-            <el-col :span="11">
+          <el-col :span="12">
             <div class="windowwarn">
               剩余量：<span class="residualQuantity"></span>
             </div>
@@ -89,7 +89,7 @@
               标况流量：<span class="standardConditionFlow"></span>
             </div>
           </el-col>
-            <el-col :span="11">
+          <el-col :span="12">
             <div class="windowwarn">
               工况流量：<span class="workingConditionFlow"></span>
             </div>
@@ -99,7 +99,7 @@
               温度：<span class="temperature"></span>
             </div>
           </el-col>
-            <el-col :span="11">
+          <el-col :span="12">
             <div class="windowwarn">
               压力：<span class="pressure"></span>
             </div>
@@ -140,20 +140,21 @@
 </template>
 
 <script>
-import { realtimeData, getData } from "@/api/dataMonitoring/reportData";
-import moment from "moment";
-//line移入时的的infowindow
-export default {
+  let closeInfoWindowTimer = null;
+  import { realtimeData, getData } from "@/api/dataMonitoring/reportData";
+  import moment from "moment";
+  //line移入时的的infowindow
+  export default {
     props: {
       obj: { typs: Object },
       title: "",
       data: {},
       map: null,
     },
-  data(){
-    return{
-      deviceId:"",
-      alarm:{},
+    data() {
+      return {
+        deviceId: "",
+        alarm: {},
       }
     },
     mounted() {
@@ -163,6 +164,16 @@ export default {
       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;
+          if (!dom || (dom && disPlay == "none")) {
+            clearInterval(this.data.class.view.deviceTimer)
+            clearInterval(closeInfoWindowTimer)
+            console.log("请求关闭")
+          }
+        }, 1000)
       }
 
     },
@@ -187,31 +198,49 @@ export default {
       changeValue(data) {
         const keyArr = Object.keys(data);
         keyArr.forEach((item) => {
+          const dw = this.danwei(item)
           const dom = document.getElementsByClassName(item)[0];
           if (dom) {
-            dom.innerHTML = data[item];
+            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=" "
+        }
+        return dw;
+      } ,
       close() {
         this.map.clearInfoWindow();
         this.data.class.view.domAllShow()
       },
     },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-  .windowwarn-content{
-    div{
+  .windowwarn-content {
+    div {
       font-size: 14px;
       font-wwight: 400;
-      .windowwarn{
+
+      .windowwarn {
         margin-bottom: 7px;
       }
     }
   }
-.wrapper {
+
+  .wrapper {
     width: 406px;
     max-height: 600px;
     // background: #fff;
@@ -219,6 +248,7 @@ export default {
     background: rgba(7, 29, 51, 0.9);
     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
     color: #fff;
+
     // overflow: hidden;
     .top {
       width: 100%;
@@ -227,6 +257,7 @@ export default {
       background-image: url(../../assets/images/blueTopBg.png);
       background-size: 100% 100%;
       background-position: center;
+
       &:before {
         // content: "";
         // position: absolute;
@@ -247,22 +278,27 @@ export default {
         height: 33px;
         background-image: url(../../assets/images/blueLeftTriangle.png);
       }
+
       .text {
         font-weight: 600;
         font-size: 16px;
         color: #ffffff;
         line-height: 51px;
       }
+
       .left {
         padding-left: 22px;
       }
+
       .right {
         padding-right: 22px;
+
         img {
           cursor: pointer;
         }
       }
     }
+
     .content {
       position: relative;
       max-height: 300px;
@@ -270,23 +306,28 @@ export default {
       overflow-y: auto;
       padding-bottom: 2px;
       border-bottom: 1px solid #eeeeee;
+
       .eq-content {
         // min-height: 156px;
         box-sizing: border-box;
         padding: 13px 22px 0px 22px;
+
         // border-bottom: 1px solid #e2e2e2;
         .text-wrapper {
           padding-top: 1px;
-        & > div {
+
+          &>div {
             margin-bottom: 6px;
           }
+
           .eq-text {
             font-size: 14px;
             font-weight: 400;
             // color: #1d1d1d;
             color: #fff;
             opacity: 1;
-          & > span {
+
+            &>span {
               vertical-align: top;
               display: inline-block;
               // white-space: nowrap;
@@ -297,9 +338,11 @@ export default {
             }
           }
         }
+
         .pic {
           width: 180px;
           height: 103px;
+
           // background-color: black;
           img {
             width: 100%;
@@ -318,11 +361,13 @@ export default {
       // padding-bottom: 10px;
       // padding-top: 16px;
       box-sizing: border-box;
+
       // border-bottom: 1px solid #e2e2e2;
-    & > div {
+      &>div {
         margin-bottom: 8px;
         font-size: 14px;
         font-weight: 400;
+
         span {
           vertical-align: top;
           display: inline-block;
@@ -331,21 +376,25 @@ export default {
         }
       }
     }
+
     .warn-wrapper {
       .warn-content {
         box-sizing: border-box;
         padding: 10px 0 2px 22px;
         border-bottom: 1px solid #e2e2e2;
         color: #fe5966;
-      & > div {
+
+        &>div {
           font-size: 14px;
           font-weight: 400;
           margin-bottom: 8px;
         }
       }
+
       .btn {
         padding: 16px 0;
         text-align: center;
+
         .elbtn {
           background-color: #053b6a;
           box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
@@ -354,12 +403,12 @@ export default {
         }
       }
     }
-}
+  }
 
-.wrapperEditorPage {
-}
-.display-default {
+  .wrapperEditorPage {}
+
+  .display-default {
     display: flex;
     justify-content: space-between;
-}
+  }
 </style>
\ No newline at end of file

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

@@ -79,7 +79,7 @@
           padding: 10px 0 2px 22px;
           height: 150px;padding-bottom: 2px;
           ">
-            <el-col :span="11">
+          <el-col :span="12">
             <div class="windowwarn">
               标况累积量：<span class="standardConditionAccumulation"></span>
             </div>
@@ -89,7 +89,7 @@
               工况累积量：<span class="workingConditionAccumulation"></span>
             </div>
           </el-col>
-            <el-col :span="11">
+          <el-col :span="12">
             <div class="windowwarn">
               剩余量：<span class="residualQuantity"></span>
             </div>
@@ -99,7 +99,7 @@
               标况流量：<span class="standardConditionFlow"></span>
             </div>
           </el-col>
-            <el-col :span="11">
+          <el-col :span="12">
             <div class="windowwarn">
               工况流量：<span class="workingConditionFlow"></span>
             </div>
@@ -109,7 +109,7 @@
               温度：<span class="temperature"></span>
             </div>
           </el-col>
-            <el-col :span="11">
+          <el-col :span="12">
             <div class="windowwarn">
               压力：<span class="pressure"></span>
             </div>
@@ -157,6 +157,7 @@
 </template>
 
 <script>
+  let closeInfoWindowTimer;
   import { realtimeData, getData } from "@/api/dataMonitoring/reportData";
   import moment from "moment";
   //line移入时的的infowindow
@@ -179,13 +180,23 @@
       };
     },
     mounted() {
-      clearInterval(this.data.view.deviceTimer);
+      clearInterval(this.data.view.deviceTimer)
 
       if (this.data.deviceType == 3 || this.data.deviceType == 4) {
         this.getDataid();
         this.data.view.deviceTimer = setInterval(this.getDataid, 5000);
+        closeInfoWindowTimer = setInterval(() => {
+          const dom = document.getElementsByClassName("amap-info")[0];
+          const disPlay = dom?.style.display;
+          if (!dom || (dom && disPlay == "none")) {
+            clearInterval(this.data.view.deviceTimer)
+            clearInterval(closeInfoWindowTimer)
+            console.log("请求关闭")
+          }
+        }, 1000)
       }
 
+
     },
     computed: {
       orderId() {
@@ -206,12 +217,28 @@
       changeValue(data) {
         const keyArr = Object.keys(data);
         keyArr.forEach((item) => {
+          const dw = this.danwei(item)
           const dom = document.getElementsByClassName(item)[0];
           if (dom) {
-            dom.innerHTML = data[item];
+            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=" "
+        }
+        return dw;
+      } ,
       createWork() {
         // 控制外层弹框
         // console.log(this.data.view.$refs.CreateWork);
@@ -275,15 +302,17 @@
 
 </script>
 <style lang="scss" scoped>
-  .windowwarn-content{
-    div{
+  .windowwarn-content {
+    div {
       font-size: 14px;
       font-wwight: 400;
-      .windowwarn{
+
+      .windowwarn {
         margin-bottom: 7px;
       }
     }
   }
+
   .wrapper {
     width: 406px;
     max-height: 600px;