Merge branch 'develop_jzl'

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/assets/mapImages/userAlarm.svg

+<svg id="组_2446" data-name="组 2446" xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 23 33.9">
+  <path id="路径_170" data-name="路径 170" d="M-1583.57,295.955a3.719,3.719,0,0,0-3.714,3.713,3.719,3.719,0,0,0,3.714,3.713,3.719,3.719,0,0,0,3.713-3.713,3.719,3.719,0,0,0-3.713-3.713Zm2.287,4.15a.608.608,0,0,1-.437.184h-1.862a.618.618,0,0,1-.621-.621V297.2a.618.618,0,0,1,.621-.621.608.608,0,0,1,.437.184.608.608,0,0,1,.184.437v1.862h1.242a.618.618,0,0,1,.621.621.6.6,0,0,1-.184.425Zm-8.966-5.047a4.143,4.143,0,0,0,4.161,0,4.166,4.166,0,0,0,2.081-3.61,4.161,4.161,0,0,0-4.162-4.161,4.16,4.16,0,0,0-4.161,4.161A4.179,4.179,0,0,0-1590.249,295.058Zm1.724,4.61a4.872,4.872,0,0,1,.391-1.931,5.639,5.639,0,0,1,.54-.966,4.67,4.67,0,0,1-.575.035,5.145,5.145,0,0,1-2.081-.425,5.006,5.006,0,0,1-.943-.517,1.2,1.2,0,0,0-1.345-.011,7.8,7.8,0,0,0-3.414,6.265v.069a.6.6,0,0,0,.6.575h7.92a5.215,5.215,0,0,1-.7-1.161,5.035,5.035,0,0,1-.391-1.931Z" transform="translate(1599.528 -284.903)" fill="#7bf8f4" opacity="0.996">
+  
+   <animate attributeName="fill" attributeType="XML"
+             from="#7bf8f4"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+  </path>
+  <g id="路径_190" data-name="路径 190" fill="none">
+    <path d="M11.5,0A11.5,11.5,0,0,1,23,11.5c0,6.351-11.6,18.226-11.5,18.3S0,17.851,0,11.5A11.5,11.5,0,0,1,11.5,0Z" stroke="none"/>
+    <path d="M 11.5 1.000003814697266 C 5.71027946472168 1.000003814697266 1 5.710294723510742 1 11.50003433227539 C 1 15.44052124023438 6.295677185058594 22.62869262695312 11.47670078277588 28.30246353149414 C 12.68496322631836 26.95182609558105 15.33070659637451 23.97891044616699 17.65538024902344 20.72865295410156 C 19.63738059997559 17.95753479003906 22 14.10700416564941 22 11.50003433227539 C 22 5.710294723510742 17.28972053527832 1.000003814697266 11.5 1.000003814697266 M 11.5 3.814697265625e-06 C 17.85128021240234 3.814697265625e-06 23 5.148744583129883 23 11.50003433227539 C 23 17.82767677307129 11.48916530609131 29.63790130615234 11.49940204620361 29.80170249938965 C 11.36462783813477 29.63816833496094 0 17.78736114501953 0 11.50003433227539 C 0 5.148744583129883 5.14872932434082 3.814697265625e-06 11.5 3.814697265625e-06 Z M 11.49940204620361 29.80170249938965 C 11.50076866149902 29.80335998535156 11.50098419189453 29.80382347106934 11.5 29.80304336547852 C 11.49963855743408 29.80275726318359 11.49944019317627 29.80231475830078 11.49940204620361 29.80170249938965 Z" stroke="none" fill="#7bf8f4">
+    <animate attributeName="fill" attributeType="XML"
+             from="#7bf8f4"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+    </path>
+  </g>
+  <path id="多边形_37" data-name="多边形 37" d="M4.471,0,8.941,5.961H0Z" transform="translate(16.094 29.803) rotate(180)" fill="#7bf8f4">
+    <animate attributeName="fill" attributeType="XML"
+             from="#7bf8f4"  to="#ff0000"
+             begin="0s" dur="1s"
+             fill="remove" repeatCount="indefinite"/>
+  </path>
+</svg>

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

@@ -40,7 +40,7 @@
               <div v-else>-</div>
             </template>
           </el-table-column>
-          <el-table-column prop="reportTime" label="报警时间" width="">
+          <el-table-column prop="reportTime" label="预警时间" width="">
             <template slot-scope="scope">
               <div v-unValue>{{ scope.row.reportTime }}</div>
             </template>

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

 <!--
  * @Author: your name
  * @Date: 2022-01-26 20:07:52
- * @LastEditTime: 2022-02-28 15:52:58
+ * @LastEditTime: 2022-02-28 18:05:19
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 
@@ -62,8 +62,8 @@
         <div class="last">报警中</div>
       </div>
       <div class="tbody flex" v-if="Array.isArray(deviceData.pressureFlows)">
-        <div class="first zzz">{{ "压力表与流量计" }}</div>
-        <div v-unValue class="">{{ deviceData.numberEquipment }}</div>
+        <div class="first zzz">{{ "压力表" }}</div>
+        <div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
         <div v-unValue class="">
           {{ deviceData.onlineEquipment }}
         </div>
@@ -80,6 +80,25 @@
           {{ deviceData.inAlarm }}
         </div>
       </div>
+      <div class="tbody flex" v-if="Array.isArray(deviceData.pressureFlows)">
+        <div class="first zzz">{{ "流量计" }}</div>
+        <div v-unValue class="">{{ deviceData.numberEquipment }}</div>
+        <div v-unValue class="">
+          {{ deviceData.numberOnlineEquipment }}
+        </div>
+        <div v-unValue class="">
+          {{ deviceData.numberOfflineEquipment }}
+        </div>
+        <div v-unValue class="">
+          {{ deviceData.numberHistoricalAlarm }}
+        </div>
+        <div v-unValue class="">
+          {{ deviceData.numberAlarmProcessed }}
+        </div>
+        <div v-unValue class="last">
+          {{ deviceData.numberInAlarm }}
+        </div>
+      </div>
     </div>
 
     <div class="btn">

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

 <!--
  * @Author: your name
  * @Date: 2022-01-26 20:07:52
- * @LastEditTime: 2022-02-28 13:30:46
+ * @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,31 +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 }}
+            {{ data.processingAlarmNum }}
           </div>
         </div>
       </div>
+    </template>
 
     <div class="btn">
       <div @click="btnClick">感知设备</div>
     </div>
-
   </div>
 </template>
 
@@ -106,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/config.js

 /*
  * @Author: your name
  * @Date: 2022-01-26 10:47:44
- * @LastEditTime: 2022-02-28 15:53:46
+ * @LastEditTime: 2022-02-28 20:33:47
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/config.js
@@ -27,6 +27,13 @@ export const svgUrl = {
   5: require("@/assets/image/jiankong1.svg"),
   6: require("@/assets/image/user1.svg"),
 };
+export const svgAlarm = {
+  2: require("@/assets/image/tiaoyaxiang1.svg"),
+  3: require("@/assets/image/famen1.svg"),
+  4: require("@/assets/image/changzhan1.svg"),
+  5: require("@/assets/image/jiankong1.svg"),
+  6: require("@/assets/mapImages/userAlarm.svg"),
+};
 export const deviceType = {
   1:"管道",
   2:"调压箱",

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

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-02-28 10:25:45
+ * @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
  */
-import { pipeColor, svgUrl } from "@/utils/mapClass/config.js";
+import { pipeColor, svgUrl, svgAlarm } from "@/utils/mapClass/config.js";
 
 // 编辑类
 // 在地图上新增的设备可以直接编辑，
@@ -34,6 +34,8 @@ export class EditorMap {
   allDevice = {};
   // 存放所有的管道
   pipeArr = {};
+  // 报警设备的对象
+  alarmObj = {};
   // 当前的infowindow的组件
   infowindowComponent = null;
   // infowindow本身
@@ -249,6 +251,7 @@ export class EditorMap {
   addDevice(deviceData, compontent) {
     const { longitude: lng, latitude: lat, iconType } = deviceData;
     const icon = svgUrl[iconType];
+    console.log("icon", icon);
     let device = this.createMarker({
       map: this.map,
       anchor: "bottom-center",
@@ -266,7 +269,6 @@ export class EditorMap {
       this.allDevice[iconType] = [];
     }
     this.allDevice[iconType].push(device);
-
     // 设备的事件函数
     this.deviceEvent(device, compontent);
   }
@@ -282,18 +284,19 @@ export class EditorMap {
         // 3是删除操作
       }
     });
-    device.on("mouseover",(e)=>{
+    device.on("mouseover", (e) => {
       const target = e.target;
       const data = target.getExtData();
-      console.log(data)
-      const name = data.nickName||data.deviceName||data.videoName||data.stationName
-      target.setLabel({content:name,direction:"top"})
-    })
-    device.on("mouseout",(e)=>{
+      console.log(data);
+      const name =
+        data.nickName || data.deviceName || data.videoName || data.stationName;
+      target.setLabel({ content: name, direction: "top" });
+    });
+    device.on("mouseout", (e) => {
       const target = e.target;
       const data = target.getExtData();
-      target.setLabel({content:""})
-    })
+      target.setLabel({ content: "" });
+    });
   }
   /** 点击marker出现infowindow
    * @description:
@@ -477,8 +480,8 @@ export class EditorMap {
         // 燃气没有公司，所以没有device.companyType不收到公司的控制
         const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
         // 设备存在
-        const deviceHas = typeArr.indexOf(+data.iconType ) >= 0;
-        console.log(deviceHas)
+        const deviceHas = typeArr.indexOf(+data.iconType) >= 0;
+        console.log(deviceHas);
         // 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
         if (deviceHas && (companyHas || !data.companyType)) {
           device.show();
@@ -488,7 +491,88 @@ export class EditorMap {
       });
     }
   }
+  // 普通调用方法
+  // 设备报警
+  deviceAlarm(obj) {
+    // 设备的类型
+    const { iconType, userId } = obj;
+    // 找到这个设备所属的空间
+    const device = this.allDevice[iconType].filter(
+      (item) => item.getExtData().userId == userId
+    )[0];
+    // 更改的icon
+    const icon = svgAlarm[iconType];
+    device.setIcon(icon);
+    // 将旧的值缓存一下
+    device.oldData = device.getExtData();
+    device.setExtData(obj);
+
+    if (!this.alarmObj[iconType]) {
+      this.alarmObj[iconType] = [];
+    } else {
+      const ind = this.alarmObj[iconType].indexOf(userId);
+      if (ind < 0) {
+        this.alarmObj[iconType].push(userId);
+      }
+    }
+  }
+  //如果传过来的报警设备中，有不在deviceAlarm中，就是恢复的设备恢复
+  relieveAlarm(alarmObj) {
+    // 把报警数组改变结构
+    const httpArr = alarmObj.map((item) => item.userId);
+    // 循环现有报警设备
+    for (let iconType in this.alarmObj) {
+      const arr = this.alarmObj[iconType];
+      // 循环现有报警设备
+      for (let i = 0; i < arr.length; i++) {
+        // 看看现有报警设备中有没有不在 报警数组中的值，有就恢复
+        const userId = arr[i];
+        // 看看接口传来的数据中还有没有这些UserId，如果没有了，就是修好了
+        const index = httpArr.indexOf(userId);
+        // 如果已经不在报警数组中,就要去大数组中找他,利用userId
+        if (index < 0) {
+          // 过滤出来这个要恢复的设备
+          const device = this.allDevice[iconType].filter(
+            (item) => item.getExtData().userId == userId
+          )[0];
+          // 恢复
+          const icon = svgUrl[iconType];
+          device.setIcon(icon);
+          // 赋值
+          const deviceData = device.oldData;
+          device.setExtData(deviceData);
+          device.oldData = null;
 
+          // 在arr中删掉
+          arr.splice(i, 1);
+          // 由于删掉了当前，所以要--恢复位置
+          i--;
+        }
+      }
+    }
+  }
+
+  // ws协议方法
+  wsAlarm(obj) {
+    const { iconType, userId, userStatus } = obj;
+    const decice = this.allDevice[iconType].filter(
+      (item) => item.getExtData().userId == userId
+    )[0];
+    let icon = null;
+    // 2报警，1恢复
+    if (userStatus == 2) {
+      icon = svgAlarm[iconType];
+      device.oldData = device.getExtData()
+      device.setExtData(obj);
+    }else if(userStatus==1){
+      icon = svgUrl[iconType];
+      const oldData = device.oldData;
+      device.setExtData(oldData);
+      device.oldData=null;
+    }
+    decice.setIcon(icon)
+
+  }
   // 卫星图切换
   satellite = null;
   changeMap(bool) {

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>

gassafetyprogress-web/vue.config.js

@@ -34,7 +34,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://localhost:8903/gassafety`,
+        // target: `http://192.168.2.14:8903/gassafety`,
         target: `http://222.223.203.154:8092/gassafety`,
         changeOrigin: true,
         pathRewrite: {