报警功能

gassafetyprogress-web/src/api/bigWindow/getDevice.js

 /*
  * @Author: your name
  * @Date: 2022-02-23 15:28:07
- * @LastEditTime: 2022-02-25 18:43:58
+ * @LastEditTime: 2022-03-01 09:05:43
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/api/bigWindow/getdevice.js
@@ -68,3 +68,11 @@ export function getCompany(query) {
     params: query
   })
 }
+// 报警
+export function userAlarm(query) {
+  return request({
+    url: '/supervise/user/getDetectorUserAlarmList',
+    method: 'get',
+    params: query
+  })
+}
\ No newline at end of file

gassafetyprogress-web/src/components/bigWindow/User.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-26 20:07:52
- * @LastEditTime: 2022-02-28 20:01:16
+ * @LastEditTime: 2022-03-01 09:17:01
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 
@@ -35,6 +35,7 @@
       </div>
     </div>
 
+    <template v-if="deviceData.detectorCountList">
       <div class="foot">
         <div class="thead flex">
           <div class="first">设备类型</div>
@@ -45,50 +46,35 @@
           <div>已处理报警</div>
           <div class="last">报警中</div>
         </div>
-      <div class="tbody flex">
-        <div v-unValue class="first zzz">{{ deviceData.detectorType }}</div>
-        <div class="">{{ deviceData.detectorCount }}</div>
+        <div
+          v-for="data in deviceData.detectorCountList"
+          :key="data.userId"
+          class="tbody flex"
+        >
+          <div v-unValue class="first zzz">{{ data.detectorType }}</div>
+          <div class="">{{ data.detectorCount }}</div>
           <div v-unValue class="">
-          {{ deviceData.onLineNum }}
+            {{ data.onLineNum }}
           </div>
           <div v-unValue class="">
-          {{ deviceData.offLineNum }}
+            {{ data.offLineNum }}
           </div>
           <div v-unValue class="">
-          {{ deviceData.historyAlarmNum }}
+            {{ data.historyAlarmNum }}
           </div>
           <div v-unValue class="">
-          {{ deviceData.cancelAlarmNum }}
+            {{ data.cancelAlarmNum }}
           </div>
           <div v-unValue class="last zzz">
-          {{ deviceData.processingAlarmNum }}
-        </div>
-      </div>
-       <div class="tbody flex">
-        <div v-unValue class="first zzz">{{ deviceData.detectorType }}</div>
-        <div class="">{{ deviceData.detectorCount }}</div>
-        <div v-unValue class="">
-          {{ deviceData.onLineNum }}
-        </div>
-        <div v-unValue class="">
-          {{ deviceData.offLineNum }}
-        </div>
-        <div v-unValue class="">
-          {{ deviceData.historyAlarmNum }}
-        </div>
-        <div v-unValue class="">
-          {{ deviceData.cancelAlarmNum }}
-        </div>
-        <div v-unValue class="last zzz">
-          {{ deviceData.processingAlarmNum }}
+            {{ data.processingAlarmNum }}
           </div>
         </div>
       </div>
+    </template>
 
     <div class="btn">
       <div @click="btnClick">感知设备</div>
     </div>
-
   </div>
 </template>
 
@@ -125,7 +111,10 @@ export default {
     },
     btnClick() {
       // this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
-      this.vueRoot.getDetectorInfoList({ userId: this.deviceData.userId },this.deviceData.nickName);
+      this.vueRoot.getDetectorInfoList(
+        { userId: this.deviceData.userId },
+        this.deviceData.nickName
+      );
     },
   },
 };

gassafetyprogress-web/src/components/bigWindow/UserCenter.vue

@@ -26,7 +26,7 @@
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="detectorName" label="设备名称" width="100">
+            <el-table-column prop="detectorName" label="设备名称" width="120">
               <template slot-scope="scope">
                 <div :title="scope.row.detectorName" class="ddd" v-unValue>
                   {{ scope.row.detectorName }}
@@ -39,12 +39,15 @@
               </template>
             </el-table-column>
             <el-table-column prop="linkman" label="联系人" width="100">
+              <template slot-scope="scope">
+                <div v-unValue>{{ scope.row.linkman }}</div>
+              </template>
             </el-table-column>
             <el-table-column prop="phone" label="联系电话" width="">
             </el-table-column>
             <el-table-column prop="detectorStatus" label="设备状态" width="100">
             </el-table-column>
-            <el-table-column prop="alarmTime" label="预警时间" width="200">
+            <el-table-column prop="alarmTime" label="预警时间" width="180">
               <template slot-scope="scope">
                 <div v-unValue>{{ scope.row.alarmTime }}</div>
               </template>

gassafetyprogress-web/src/utils/mapClass/map.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-02-28 22:09:01
+ * @LastEditTime: 2022-03-01 10:04:44
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/mapClass.js
@@ -499,7 +499,7 @@ export class EditorMap {
     // 找到这个设备所属的空间
     const device = this.allDevice[iconType].filter(
       (item) => item.getExtData().userId == userId
-    );
+    )[0];
     // 更改的icon
     const icon = svgAlarm[iconType];
     device.setIcon(icon);
@@ -521,7 +521,7 @@ export class EditorMap {
     // 把报警数组改变结构
     const httpArr = alarmObj.map((item) => item.userId);
     // 循环现有报警设备
-    for (iconType in this.alarmObj) {
+    for (let iconType in this.alarmObj) {
       const arr = this.alarmObj[iconType];
       // 循环现有报警设备
       for (let i = 0; i < arr.length; i++) {
@@ -532,9 +532,9 @@ export class EditorMap {
         // 如果已经不在报警数组中,就要去大数组中找他,利用userId
         if (index < 0) {
           // 过滤出来这个要恢复的设备
-          const device = this.addDevice[iconType].filter(
+          const device = this.allDevice[iconType].filter(
             (item) => item.getExtData().userId == userId
-          );
+          )[0];
           // 恢复
           const icon = svgUrl[iconType];
           device.setIcon(icon);
@@ -554,17 +554,17 @@ export class EditorMap {
 
   // ws协议方法
   wsAlarm(obj) {
-    const { iconType, userId, aaa } = obj;
+    const { iconType, userId, userStatus } = obj;
     const decice = this.allDevice[iconType].filter(
       (item) => item.getExtData().userId == userId
-    );
+    )[0];
     let icon = null;
     // 2报警，1恢复
-    if (aaa == 2) {
+    if (userStatus == 2) {
       icon = svgAlarm[iconType];
       device.oldData = device.getExtData()
       device.setExtData(obj);
-    }else if(aaa==1){
+    }else if(userStatus==1){
       icon = svgUrl[iconType];
       const oldData = device.oldData;
       device.setExtData(oldData);

gassafetyprogress-web/src/views/bigWindow/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2022-02-28 15:54:27
+ * @LastEditTime: 2022-03-01 09:51:34
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
@@ -152,6 +152,7 @@ import {
   getCz,
   getVideo,
   getUser,
+  userAlarm,
 } from "@/api/bigWindow/getDevice";
 import Line from "@/components/bigWindow/Line.vue";
 import VideoView from "@/components/bigWindow/VideoView.vue";
@@ -244,6 +245,9 @@ export default {
       centerTotal: null,
       centerShow: false,
       centerTitle: "",
+
+      // 报警轮询timer
+      alarmTimer: null,
     };
   },
 
@@ -305,12 +309,16 @@ export default {
       this.goMap(getFm, this.addDevice, DeviceA);
       this.goMap(getCz, this.addDevice, DeviceA);
       this.goMap(getVideo, this.addDevice, VideoView);
-      this.goMap(detectorUserList, this.addDevice, User);
-      // getVideo().then((res) => {
-      //   console.log("getVideo", res);
-      // });
+      // 用户要等一下 因为有报警数据
+      this.goMap(detectorUserList, this.addDevice, User).then((res) => {
+        // 先查一下，然后开启定时器
+        this.userAlarm();
+        this.alarmTimer = setInterval(() => {
+          this.userAlarm();
+          // console.log("查询报警");
+        }, 6000);
+      });
     }
-
     this.currentTime();
     this.$refs.mychild.choice(0);
     this.$refs.mychild2.choice(0);
@@ -336,7 +344,7 @@ export default {
       }
     },
     goMap(httpFunc, addFunc, component) {
-      httpFunc().then((res) => {
+      return httpFunc().then((res) => {
         // 给用户加icontype
 
         if (res.data && !res.data[0].iconType) {
@@ -344,26 +352,35 @@ export default {
             item.iconType = 6;
           });
         }
-        // if (res.data && !res.data[0].iconType) {
-        //   res.data.forEach((item) => {
-        //     item.iconType = 6;
-        //   });
-        // }
-
         // 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
         let config = {};
         if (Array.isArray(res)) {
           config = { data: res };
           // 给视频设备的conpanyType变成null
-          if(res[0].iconType==5){
-            res.forEach(item=>{
+          if (res[0].iconType == 5) {
+            res.forEach((item) => {
               item.companyType = null;
-            })
+            });
           }
         } else {
           config = { data: res.data };
         }
         addFunc(config, component);
+        return config.iconType;
+      });
+    },
+    userAlarm() {
+      userAlarm().then((res) => {
+        console.log("报警", res.data);
+        if (res.data.length > 0) {
+          // 报警
+          res.data.forEach((item) => {
+            this.map.deviceAlarm(item);
+          });
+          // 看看谁告消警
+        }
+        this.map.relieveAlarm(res.data);
+
       });
     },
 
@@ -474,6 +491,9 @@ export default {
     if (this.formatDate) {
       clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
     }
+    if (this.alarmTimer) {
+      clearInterval(this.alarmTimer);
+    }
   },
 };
 </script>