大屏监控设备报警

huaxin-system/src/main/java/com/zehong/system/domain/TGasAlarm.java

 package com.zehong.system.domain;
 
-import java.util.Date;
 import com.fasterxml.jackson.annotation.JsonFormat;
-import org.apache.commons.lang3.builder.ToStringBuilder;
-import org.apache.commons.lang3.builder.ToStringStyle;
 import com.zehong.common.annotation.Excel;
 import com.zehong.common.core.domain.BaseEntity;
+import org.apache.commons.lang3.builder.ToStringBuilder;
+import org.apache.commons.lang3.builder.ToStringStyle;
+
+import java.math.BigDecimal;
+import java.util.Date;
 
 /**
  * 报警器报警记录对象 t_gas_alarm
@@ -69,6 +71,10 @@ public class TGasAlarm extends BaseEntity
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     private Date updatedAt;
 
+    private BigDecimal longitude;
+
+    private BigDecimal latitude;
+
     public void setId(Long id) 
     {
         this.id = id;
@@ -187,6 +193,22 @@ public class TGasAlarm extends BaseEntity
         return updatedAt;
     }
 
+    public BigDecimal getLongitude() {
+        return longitude;
+    }
+
+    public void setLongitude(BigDecimal longitude) {
+        this.longitude = longitude;
+    }
+
+    public BigDecimal getLatitude() {
+        return latitude;
+    }
+
+    public void setLatitude(BigDecimal latitude) {
+        this.latitude = latitude;
+    }
+
     @Override
     public String toString() {
         return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)

huaxin-system/src/main/resources/mapper/system/TGasAlarmMapper.xml

@@ -22,23 +22,42 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     </resultMap>
 
     <sql id="selectTGasAlarmVo">
-        select id, number, report_status, `position`,starttime, endtime, nd, params, status, type, reason, remark, created_at, updated_at from t_gas_alarm
+        SELECT
+            alarm.id,
+            alarm.number,
+            alarm.report_status,
+            alarm.position,
+            alarm.starttime,
+            alarm.endtime,
+            alarm.nd,
+            alarm.params,
+            alarm.status,
+            alarm.type,
+            alarm.reason,
+            alarm.remark,
+            alarm.created_at,
+            alarm.updated_at,
+            gas.longitude,
+            gas.latitude
+        FROM
+            t_gas_alarm alarm
+        LEFT JOIN t_gas_data gas ON gas.number = alarm.number
     </sql>
 
     <select id="selectTGasAlarmList" parameterType="TGasAlarm" resultMap="TGasAlarmResult">
         <include refid="selectTGasAlarmVo"/>
         <where>  
-            <if test="number != null  and number != ''"> and number like concat('%', #{number}, '%')</if>
-            <if test="status != null "> and status = #{status}</if>
-            <if test="type != null "> and type = #{type}</if>
-            <if test="reason != null "> and reason = #{reason}</if>
+            <if test="number != null  and number != ''"> and alarm.number like concat('%', #{number}, '%')</if>
+            <if test="status != null "> and alarm.status = #{status}</if>
+            <if test="type != null "> and alarm.type = #{type}</if>
+            <if test="reason != null "> and alarm.reason = #{reason}</if>
         </where>
-        order by starttime desc
+        order by alarm.starttime desc
     </select>
     
     <select id="selectTGasAlarmById" parameterType="Long" resultMap="TGasAlarmResult">
         <include refid="selectTGasAlarmVo"/>
-        where id = #{id}
+        where alarm.id = #{id}
     </select>
         
     <insert id="insertTGasAlarm" parameterType="TGasAlarm" useGeneratedKeys="true" keyProperty="id">

huaxin-web/src/utils/mapClass/deviceIconTypeConfig.js

@@ -3,6 +3,7 @@ export const deviceType = {
   "regulatorBox": 1,
   "valve": 2,
   "station": 3,
+  "monitorDeviceAlarm": 4
 }
 
 //设备图标
@@ -10,7 +11,7 @@ export const deviceIcon = {
   1:  require("@/assets/indexImg/mapTyx.png"),
   2:  require("@/assets/indexImg/mapFmj.png"),
   3:  require("@/assets/indexImg/mapCz.png"),
-
+  4:  require("@/assets/indexImg/monitorDeviceAlarm.gif")
 }
 
 export const pipeColor = {

huaxin-web/src/views/indexcomponents/gaodemap/components/MonitorDeviceAlarmInfo.vue

+<template>
+  <div class="devicea-wrapper">
+    <div class="title">
+      {{ deviceData.number }}
+    </div>
+    <div class="close" @click="close">
+      <i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
+    </div>
+    <p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p>
+    <div>
+      <div class="top flex">
+        <div class="top-left">
+          <div class="group">
+            <div class="left">设备编号：</div>
+            <div class="right zzz">{{ deviceData.number }}</div>
+          </div>
+
+          <div class="group">
+            <div class="left last">安装位置：</div>
+            <div
+              :title="deviceData.position"
+              class="right last zzz"
+            >
+              {{ deviceData.position || "-" }}
+            </div>
+          </div>
+
+          <div class="group">
+            <div class="left">上报数值：</div>
+            <div class="right zzz">{{ deviceData.nd }}</div>
+          </div>
+        </div>
+
+        <div class="top-center">
+          <div class="group">
+             <div class="left">设备状态：</div>
+             <div class="right zzz">
+               {{ deviceStatusFormat(deviceData)}}
+             </div>
+           </div>
+
+          <div class="group">
+            <div class="left">报警开始时间：</div>
+            <div class="right zzz">{{ deviceData.starttime }}</div>
+          </div>
+
+          <div class="group">
+            <div class="left">报警状态：</div>
+            <div class="right zzz">{{ statusFormat(deviceData) }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div style="text-align: right">
+        <el-button
+          type="primary"
+          size="small"
+          @click="toDeal"
+        >
+          去处置
+        </el-button>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: "device-info",
+      data(){
+        return{
+          // 报警状态字典
+          statusOptions: [],
+          deviceStatus: [],
+        }
+      },
+      created(){
+        this.getDicts("t_gas_alarm_status").then(response => {
+            this.statusOptions = response.data;
+        });
+        this.getDicts("t_device_status").then(response => {
+            this.deviceStatus = response.data;
+        });
+      },
+      methods:{
+        close() {
+          this.mapClass.infowindowClose();
+        },
+        // 报警状态字典翻译
+        statusFormat(row) {
+          return this.selectDictLabel(this.statusOptions, row.status);
+        },
+        deviceStatusFormat(row) {
+          const deviceStatus = this.selectDictLabel(this.deviceStatus, row.reportStatus);
+          return deviceStatus ? deviceStatus : "-";
+        },
+        toDeal(){
+          this.vueRoot.$router.push({path:"/reportinfo/alarm"});
+        }
+      }
+    }
+</script>
+
+<style scoped lang="scss">
+  .devicea-wrapper {
+    box-shadow: 0px 0px 10px #54e0ef inset;
+    background-color: #071738;
+    padding: 10px;
+    position: relative;
+    width: 670px;
+    border-radius: 7px;
+    .title {
+      // padding-top: 10px;
+      // padding-left: 10px;
+      font-size: 14px;
+      line-height: 14px;
+      color: #ffffff;
+    }
+    .close {
+      position: absolute;
+      right: 10px;
+      top: 5px;
+      cursor: pointer;
+    }
+
+    .top {
+      margin-top: 10px;
+      margin-bottom: 10px;
+      box-sizing: border-box;
+      .top-left {
+        flex: 1.8;
+        .group {
+          height: 30px;
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          box-sizing: border-box;
+          div {
+            flex: 1;
+            box-sizing: border-box;
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 30px;
+            padding: 0 5px;
+            &.last {
+              border-bottom: none;
+            }
+          }
+          .left {
+            text-align: right;
+          }
+          .right {
+            flex:2;
+          }
+        }
+      }
+      .top-center {
+        flex: 1.8;
+        .group {
+          height: 30px;
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          box-sizing: border-box;
+          div {
+            flex: 1;
+            box-sizing: border-box;
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 30px;
+            padding: 0 5px;
+            &.last {
+              border-bottom: none;
+            }
+          }
+          .left {
+            text-align: right;
+          }
+          .right {
+            flex:0.9;
+          }
+        }
+      }
+      .top-right {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        div {
+          width: 50px;
+          font-size: 14px;
+          color: #ffffff;
+          &.last {
+            border-bottom: none;
+          }
+        }
+        .imgtext {
+          color: #ffffff;
+          font-size: 30px;
+        }
+      }
+    }
+    .foot {
+      font-size: 14px;
+      color: #ffffff;
+      background: url(~@/assets/firstimage/box-bg.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      padding: 1px;
+      .thead,
+      .tbody {
+        div {
+          flex: 1;
+          text-align: left;
+          box-sizing: border-box;
+          text-align: center;
+          border: 1px solid #1b365d;
+        }
+      }
+      .tbody {
+        border-top: none;
+      }
+    }
+
+    .btn {
+      position: relative;
+      margin-top: 10px;
+      div {
+        font-size: 14px;
+        color: #ffffff;
+        background: url(~@/assets/firstimage/boxbtn-bg.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        padding: 7px 15px;
+      }
+    }
+    .flex {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+</style>

huaxin-web/src/views/indexcomponents/gaodemap/index.vue

@@ -47,6 +47,7 @@ import axios from "axios";
 import gcoord from "gcoord";
 import LineTips from "./components/LineTips";
 import { getAlarmInfoList } from "@/api/gasdata/alarm";
+import MonitorDeviceAlarmInfo from "./components/MonitorDeviceAlarmInfo";
 export default {
   name: "gao-map-index",
   props: {
@@ -59,6 +60,7 @@ export default {
   },
   mounted() {
     this.initMap();
+    console.log("<<<<<<<<<<>>>>>>>>>>>>>>>",this.$router)
   },
   data() {
     return {
@@ -94,7 +96,8 @@ export default {
       pipeLines: [],
       lineShow: false,
       lineTipsShow: false,
-      alarmInfoData: []
+      alarmInfoData: [],
+      timer: null
     };
   },
   methods: {
@@ -125,6 +128,8 @@ export default {
       //this.getPipeInfo();
       //this.getPipeByGeoJson();
       this.getPipeByWgsArr();
+      //监测报警设备
+      this.getMonitorDevice();
     },
     //调压箱
     getDeviceInfo() {
@@ -317,14 +322,34 @@ export default {
         }
       });
     },
+    getMonitorDevice(){
+      this.getAlarmInfo();
+      this.timer = setInterval(this.getAlarmInfo, 2000);
+    },
     //获取报警信息
     getAlarmInfo(){
-      getAlarmInfoList({reason: "0"}).then(res =>{
-        if(res.code == 200){
-          this.alarmInfoData = res.data;
+      getAlarmInfoList({reason: "0"}).then((res) => {
+        const length = this.gaoMap.allDevice[4] ? this.gaoMap.allDevice[4].length : 0;
+        if (res.code && res.data) {
+            res.data.forEach((item) => {
+              item.iconType = 4;
+              this.gaoMap.addDevice(item, MonitorDeviceAlarmInfo, true);
+            });
+            // return
+             //setTimeout(() =>{
+            for(let i = 0; i<length; i++){
+              this.gaoMap.map.remove(this.gaoMap.allDevice[4][i]);
             }
-      })
+            this.gaoMap.allDevice[4].splice(0,length);
+             //},200)
+
+            //console.log(length,">>>>>end>>>>>>>",this.gaoMap.allDevice[4]);
         }
+      });
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
   },
   computed: {
     ...mapGetters(["systemSetting"]),