增加消警功能

gassafety-web/.env.development

@@ -8,7 +8,7 @@ VUE_APP_BASE_API = '/dev-api'
 VUE_APP_MAP_CENTER = '石家庄'
 
 #代理地址
-VUE_APP_TARGET = 'http://36.148.23.59:8901/gassafety'
+VUE_APP_TARGET = 'http://192.168.2.28:8903/gassafety'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

gassafety-web/src/api/enterprise/info.js

+/*
+ * @Author: your name
+ * @Date: 2021-07-16 10:06:43
+ * @LastEditTime: 2022-01-18 11:36:15
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-web/src/api/enterprise/info.js
+ */
 import request from '@/utils/request'
 
 // 查询企业基本信息列表
@@ -51,3 +59,12 @@ export function exportInfo(query) {
     params: query
   })
 }
+
+// 消除警报
+export function handEliminationAlarm(query) {
+  return request({
+    url: 'dataMonitoring/deviceAlarm/handEliminationAlarm',
+    method: 'get',
+    params: query
+  })
+}

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

@@ -89,6 +89,7 @@
           }}</span>
         </div>
       </div>
+
       <div @click.stop="stopPropatation" class="btn">
         <span @mousedown.stop="deviceMore">
           <el-button class="elbtn" type="primary">设备详情</el-button>
@@ -99,6 +100,9 @@
         <span v-else @mousedown.stop="checkWork">
           <el-button class="elbtn" type="primary">查看工单</el-button>
         </span>
+        <span @click="handelR">
+          <el-button class="elbtn" type="primary">消警</el-button>
+        </span>
       </div>
     </div>
   </div>
@@ -107,12 +111,16 @@
 <script>
 //line移入时的的infowindow
 import moment from "moment";
+// 消除警报
+import { handEliminationAlarm } from "@/api/enterprise/info";
 export default {
   props: {
     obj: { typs: Object },
   },
   data() {
-    return {};
+    return {
+      loading:null,
+    };
   },
   created() {
     // console.log("created", this.obj);
@@ -200,7 +208,34 @@ export default {
     },
     close() {
       this.obj.polyline.infoWindow.close();
-      this.obj.polyline.getExtData().class.view.domAllShow()
+      this.obj.polyline.getExtData().class.view.domAllShow();
+    },
+    handelR() {
+      this.$confirm("是否消除警报")
+        .then((item) => {
+          if (item == "confirm") {
+           this.loading = this.$loading({
+              lock: true,
+              text: "Loading",
+              spinner: "el-icon-loading",
+              background: "rgba(0, 0, 0, 0.7)",
+            });
+              
+           
+            handEliminationAlarm({
+              alarmId: this.obj.alarmId,
+            }).then((res) => {
+              if (res.code == 200) {
+                this.obj.polyline.getExtData().class.closeInfoWindow();
+                this.loading.close();
+              }
+            });
+          }
+        })
+        .catch((item) => {
+          console.log(item);
+          this.loading.close();
+        });
     },
   },
 };
@@ -242,7 +277,7 @@ export default {
     }
     .left {
       padding-left: 22px;
-      width:100%;
+      width: 100%;
       overflow: hidden;
     }
     .right {

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

@@ -14,10 +14,12 @@
       <div class="eq-content display-default">
         <div class="text-wrapper">
           <div class="eq-text">
-            设备类型：<span>{{ title ? title: "-" }}</span>
+            设备类型：<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>
@@ -63,7 +65,9 @@
     <div class="warn-wrapper" v-if="true">
       <div class="warn-content">
         <div>
-          报警状态：<span>报警({{ data.alarmType  ? data.alarmType : "-" }})</span>
+          报警状态：<span
+            >报警({{ data.alarmType ? data.alarmType : "-" }})</span
+          >
         </div>
         <div>
           详细信息：<span>{{ data.alarmValue ? data.alarmValue : "-" }}</span>
@@ -73,12 +77,17 @@
         </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 == 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>
@@ -110,9 +119,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">
@@ -120,15 +127,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">
@@ -138,30 +148,37 @@
         </div>
       </template>
 
-
-
       <div class="btn">
         <span @mousedown.stop="deviceMore">
           <el-button class="elbtn" type="primary">设备详情</el-button>
         </span>
         <span v-if="orderId" @mousedown.stop="createWork">
-          <el-button v-if="title == '压力表' || title == '流量计'" class="elbtn" type="primary">生成工单</el-button>
+          <el-button
+            v-if="title == '压力表' || title == '流量计'"
+            class="elbtn"
+            type="primary"
+            >生成工单</el-button
+          >
         </span>
         <span v-else @mousedown.stop="checkWork">
           <el-button class="elbtn" type="primary">查看工单</el-button>
         </span>
-
+        <span @click="handelR"
+          ><el-button class="elbtn" type="primary">消警</el-button>
+        </span>
       </div>
     </div>
   </div>
 </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 { handEliminationAlarm } from "@/api/enterprise/info";
+import moment from "moment";
+//line移入时的的infowindow
+export default {
   props: {
     obj: { typs: Object },
     title: "",
@@ -176,10 +193,11 @@
         3: "流量计",
         4: "智能燃气表",
       },
+      loading: null,
     };
   },
   mounted() {
-      clearInterval(this.data.view.deviceTimer)
+    clearInterval(this.data.view.deviceTimer);
 
     if (this.data.deviceType == 3 || this.data.deviceType == 4) {
       this.getDataid();
@@ -188,14 +206,12 @@
         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("请求关闭")
+          clearInterval(this.data.view.deviceTimer);
+          clearInterval(closeInfoWindowTimer);
+          console.log("请求关闭");
         }
-        }, 1000)
+      }, 1000);
     }
-
-
   },
   computed: {
     orderId() {
@@ -208,36 +224,42 @@
   methods: {
     moment,
     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;
-      } ,
+    },
     createWork() {
       // 控制外层弹框
       // console.log(this.data.view.$refs.CreateWork);
@@ -285,23 +307,42 @@
         },
       });
     },
-      changeA() {
-
+    changeA() {},
+    // 手动消除报警器
+    handelR() {
+      this.$confirm("是否消除警报")
+        .then((item) => {
+          if (item == "confirm") {
+            this.loading = this.$loading({
+              lock: true,
+              text: "Loading",
+              spinner: "el-icon-loading",
+              background: "rgba(0, 0, 0, 0.7)",
+            });
+            handEliminationAlarm({
+              alarmId: this.data.alarmId,
+            }).then((res) => {
+              if (res.code == 200) {
+                this.map.clearInfoWindow();
+                this.loading.close();
               }
+            });
+          }
+        })
+        .catch((item) => {
+          console.log(item);
+          this.loading.close();
+        });
+    },
   },
   beforeDestroy() {
     // this.data.view.createWorkOpen = false;
-      console.log("清空卸载")
+    console.log("清空卸载");
   },
-
-  };
-
-
-
-
+};
 </script>
 <style lang="scss" scoped>
-  .windowwarn-content {
+.windowwarn-content {
   div {
     font-size: 14px;
     font-wwight: 400;
@@ -310,9 +351,9 @@
       margin-bottom: 7px;
     }
   }
-  }
+}
 
-  .wrapper {
+.wrapper {
   width: 406px;
   max-height: 600px;
   // background: #fff;
@@ -378,7 +419,7 @@
       .text-wrapper {
         padding-top: 1px;
 
-          &>div {
+        & > div {
           margin-bottom: 6px;
         }
 
@@ -388,7 +429,7 @@
           color: #fff;
           opacity: 1;
 
-            &>span {
+          & > span {
             vertical-align: top;
             display: inline-block;
             // white-space: nowrap;
@@ -424,7 +465,7 @@
     box-sizing: border-box;
 
     // border-bottom: 1px solid #e2e2e2;
-      &>div {
+    & > div {
       margin-bottom: 8px;
       font-size: 14px;
       font-weight: 400;
@@ -445,7 +486,7 @@
       border-bottom: 1px solid #e2e2e2;
       color: #fe5966;
 
-        &>div {
+      & > div {
         font-size: 14px;
         font-weight: 400;
         margin-bottom: 8px;
@@ -470,12 +511,13 @@
       }
     }
   }
-  }
+}
 
-  .wrapperEditorPage {}
+.wrapperEditorPage {
+}
 
-  .display-default {
+.display-default {
   display: flex;
   justify-content: space-between;
-  }
+}
 </style>

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

@@ -475,7 +475,7 @@ export default {
       mapStyle: true,
 
       // 设备轮询用的定时器
-      deviceTimer:null,
+      deviceTimer: null,
     };
   },
   created() {
@@ -691,18 +691,26 @@ export default {
 
       // 过滤报警管道
       const polyLineArr = list.filter((item) => {
-        return item.deviceType == "0";
+        return item.deviceType == "0" || item.deviceType=="管道";
       });
       // 过滤报警的其它设备
       const deviceArr = list.filter((item) => {
-        return item.deviceType != "0";
+        return item.deviceType != "管道" ;
       });
       // 管道
+      console.log("polyLineArr",polyLineArr)
       if (polyLineArr.length > 0) {
         polyLineArr.forEach((item) => {
           // 获取循报警设备的id
-          const { deviceId, orderId, alarmId, alarmType, alarmValue, endTime } =
-            item;
+          const {
+            deviceId,
+            orderId,
+            alarmId,
+            alarmType,
+            alarmValue,
+            endTime,
+            dealStatus,
+          } = item;
           console.log("endTime", endTime);
           // 获取polyLine
           const polyline = this.gaoMap.polyLines.filter((item) => {
@@ -718,14 +726,21 @@ export default {
             options.lineData.view = this;
             options.lineData.alarmId = alarmId;
             options.lineData.orderId = orderId;
-            if (endTime) {
-              polyline.setOptions({ strokeColor: "#2EE7E7" });
+            // dealStatus==4 就是取消报警状态
+            if (endTime || dealStatus==4) {
+              // 判断管道颜色
+              const pipePressureObj = this.gaoMap.polyLines.filter(item=>{
+                return options.lineData.alarmId == item.getExtData().lineData.alarmId;
+              })[0];
+              const {pipePressure} = pipePressureObj.getExtData().lineData;
+              polyline.setOptions({ strokeColor: lineColor[pipePressure] });
               options.lineData.alarmState = 0;
+              options.lineData.dealStatus=4
               // 报警类型
               options.lineData.alarmType = null;
               // 报警信息
               options.lineData.alarmValue = null;
-              console.log("管道回复");
+              console.log("管道");
             } else {
               // 报警声音
               this.audio();
@@ -738,16 +753,20 @@ export default {
               console.log("管道报警");
             }
             polyline.setExtData(options);
+            console.log("dealStatus",dealStatus)
             const myP = this.allList[0].filter((item) => {
               console.log(item.selfData.alarmState);
-              return item.selfData.alarmState;
+              return item.selfData.alarmState || item.selfData.dealStatus ==4;
             })[0];
 
             // console.log("this.allList[0]", this.allList[0]);
             // console.log("myP", myP);
             // 改变左侧列表的状态（1报警，0，正常）
+            console.log("myP", myP);
+            if (myP) {
               myP.alarmState = options.lineData.alarmState;
             }
+          }
         });
       }
 
@@ -756,8 +775,15 @@ export default {
       if (deviceArr.length > 0) {
         deviceArr.forEach((item) => {
           // 获取循报警设备的id
-          const { deviceId, alarmId, alarmType, alarmValue, endTime, orderId } =
-            item;
+          const {
+            deviceId,
+            alarmId,
+            alarmType,
+            alarmValue,
+            endTime,
+            orderId,
+            dealStatus,
+          } = item;
           // 获取polyLine
           const device = this.gaoMap.markers.filter((item) => {
             const { deviceId: id, troubleId } = item.getExtData();
@@ -771,7 +797,9 @@ export default {
             options.view = this;
             options.alarmId = alarmId;
             options.orderId = orderId;
-            if (endTime) {
+            // dealStatus==4 就是取消报警状态
+
+            if (endTime || dealStatus == 4) {
               options.alarmState = 0;
               // 报警类型
               options.alarmType = null;
@@ -812,7 +840,7 @@ export default {
             // 3是流量计 4是压力表
             if (device.getExtData().deviceType == 3) {
               // 如果有endtime说明已经维护好了
-              if (endTime) {
+              if (endTime || dealStatus == 4) {
                 this.gaoMap.changeMarkIcon(
                   device,
                   require(`@/assets/images/liuliangji.png`)
@@ -824,7 +852,7 @@ export default {
                 );
               }
             } else if (device.getExtData().deviceType == 4) {
-              if (endTime) {
+              if (endTime || dealStatus == 4) {
                 this.gaoMap.changeMarkIcon(
                   device,
                   require(`@/assets/images/yalibiao.png`)
@@ -848,7 +876,7 @@ export default {
         "ws://36.148.23.59:8901/gassafety/websocketServer"
       );
       // this.ws = new WebSocket(
-      //   "ws://192.168.2.23:8903/gassafety/websocketServer"
+      //   "ws://192.168.2.28:8903/gassafety/websocketServer"
       // );
       this.ws.onopen = (evt) => {
         console.log("WebSockets开启");
@@ -858,6 +886,7 @@ export default {
         // console.log("Received Message: " + evt.data);
         // ws.close();
         const obj = JSON.parse(evt.data);
+        console.log("接受socketobj", obj);
         this.statusChange([obj]);
       };
       this.ws.onclose = () => {