FE-SchoolBigData/src/components/waterAlarm/waterAlarm.vue

<template>
  <div class="waterAlarm">
    <div class="waterAlarmBlack" v-if="showType">
      <div class="waterAlarm-max-big-box">
        <div class="waterAlarm-title-box">
          <div class="top-img-box">
            <img class="top-img-one vibrate" src="@/assets/ZDimages/icon_bt_yso@1x.png">
            <img class="top-img-two" src="@/assets/ZDimages/icon_bt_yst@1x.png">
          </div>
          <p class="top-name-p">预警事件详情</p>
          <p class="top-out-p el-icon-close" @click="outPlan"></p>
        </div>
        <div class="waterAlarm-name-box">
          <div class="lv-box type-color-a">
            <div>纯水设备</div>
          </div>
          <p class="name-p">{{planData.buildingName}}：{{planData.deviceName}}</p>
          <p class="time-p">报警时间：{{parseTime(planData.warningTime)}}</p>
        </div>
        <div v-if="!lookImgType" class="waterAlarm-big-box">
          <div class="waterAlarm-left-box">
            <img :src="planData.deviceImg" alt="">
          </div>
          <div class="waterAlarm-right-box">
            <div class="waterAlarm-sensor-box waterAlarm-scrollbar">
              <p>所属单位：{{planData.deptName}}</p>
              <p>所在位置：{{planData.buildingName}} {{planData.floorName}}</p>
            </div>
            <div class="waterAlarm-text-box">
              <div class="waterAlarm-text-left-box waterAlarm-scrollbar">
                <div>
                  <p>设备名称：</p>
                  <p>{{planData.deviceName}}</p>
                </div>
                <div>
                  <p>报警原因：</p>
                  <p style="color:#FF0102;">{{planData.warningReason}}</p>
                </div>
                <div>
                  <p>报警时间：</p>
                  <p>{{parseTime(planData.warningTime)}}</p>
                </div>
                <div>
                  <p>所在位置：</p>
                  <p>{{planData.buildingName}} {{planData.floorName}}</p>
                </div>
              </div>
              <div class="waterAlarm-text-right-box waterAlarm-scrollbar">
                <div class="box-one">
                  <p>通知人：</p>
                  <p>{{planData.notifierName}}</p>
                </div>
                <div class="box-one">
                  <p>通知时间：</p>
                  <p>{{parseTime(planData.notifyTime)}}</p>
                </div>
                <div class="box-one">
                  <p>通知方式：</p>
                  <p>{{planData.notifyMethod}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="waterAlarm-bottom-button-box">
          <p class="null-p"></p>
          <p class="button-out-p" @click="outPlan">关闭</p>
          <p class="null-p"></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import mqtt from 'mqtt'
  import {
    waterWaterWarnRecordGetWarnById,
  } from "@/api/index";

  export default {
    name: 'waterAlarm',
    data () {
      return {
        showType:false,
        //预案MQTT
        planOpic:'water/device/collector/*/',
        planClient:{},
        //预案参数
        planData:{},
        //持续时间
        seconds:null,
        //定时器
        timer:null,
      }
    },
    created(){

    },
    mounted(){
      let self = this;
      //判断是否已有链接
      if(!this.planClient.unsubscribe){
        this.offPlanMQTT('on');
      }
      setTimeout(function(){
        self.waterWaterWarnRecordGetWarnById();
      },500)
    },
    methods:{
      //关闭窗口
      outPlan(){
        let self = this;
        if(this.lookImgType){
          this.$set(this,'lookImgType',false);
        }else{
          this.$confirm('纯水系统监测异常，确定要关闭窗口？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            clearInterval(self.timer);
            self.$set(self,'showType',false);
          }).catch(() => {});
        }
      },
      //预案-MQTT连接
      offPlanMQTT(type){
        let self = this;
        if(self.planClient.unsubscribe){
          self.planClient.unsubscribe(self.planOpic, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.planClient.end();
          this.$set(this,'planClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.planMQTT();
        }
      },
      //预案-MQTT订阅
      planMQTT(){
        let self = this;
        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.planClient.on("connect", e =>{
          this.planClient.subscribe(self.planOpic, (err) => {
            if (!err) {
              console.log("预案-订阅成功:" + self.planOpic);
            }else{
              // console.log("预案-连接错误:" + err);
            }
          });
        });
        this.planClient.on("message", (topic, message) => {
          if (message){
            console.log("纯水报警触发:");
            //获取预案数据
            setTimeout(function(){
              self.waterWaterWarnRecordGetWarnById();
            },500)
          }
        });
      },
      //查询当前正在发生的预案
      waterWaterWarnRecordGetWarnById(){
        clearInterval(this.timer);
        waterWaterWarnRecordGetWarnById().then(response => {
          if(response.data){
            if(response.data.deviceCode == null){
              response.data.deviceImg = require('@/assets/ZDimages/pureWater/shipinlou.png')
            }else if(response.data.deviceCode == '2'){
              response.data.deviceImg = require('@/assets/ZDimages/pureWater/shipinlou.png')
            }else if(response.data.deviceCode == '3'){
              response.data.deviceImg = require('@/assets/ZDimages/pureWater/likelou.png')
            }else if(response.data.deviceCode == '4'){
              response.data.deviceImg = require('@/assets/ZDimages/pureWater/likelou.png')
            }
            this.$set(this,'planData',response.data);
            this.$set(this,'showType',true);
          }else{
            this.$set(this,'showType',false);
          }
        })
      },
      //计算时间戳
      newTimestamp(value){
        let timestamp = this.accSub(this.accDiv(Date.parse(new Date()),1000),value);
        this.time(timestamp);
      },
      //定时器
      time(time){
        let self = this;
        self.seconds = parseInt(time);
        self.timer = window.setInterval(refreshCount, 1000);
        function refreshCount() {
          self.seconds++
        }
      },
      //时间格式
      convertSecondsToHMS(seconds) {
        var hours = Math.floor(seconds / 3600);
        var minutes = Math.floor((seconds % 3600) / 60);
        var remainingSeconds = seconds % 60;
        return hours + "小时 " + minutes + "分钟 " + remainingSeconds + "秒";
      },
    },
    beforeDestroy() {
      //清除MQTT
      let self = this;
      self.offPlanMQTT();
    },
  }
</script>
<style scoped lang="scss">
  .waterAlarm{
    .waterAlarmBlack{
      height:100%;
      width:100%;
      position: absolute;
      top:0;
      left:0;
      z-index:1100;
      background-color: rgba(0,0,0,0.8);
      .waterAlarm-max-big-box{
        position: absolute;
        left:50%;
        top:50%;
        margin-top:-567px;
        margin-left:-938px;
        width: 1720px;
        height: 1140px;
        display: flex;
        flex-direction: column;
        .waterAlarm-title-box{
          display: flex;
          padding:40px 0 36px 30px;
          border-bottom:1px solid #1ed0f8;
          background-color: #01232A;
          border-top-left-radius:20px;
          border-top-right-radius:20px;
          .top-img-box {
            width: 60px;
            position: relative;
            .top-img-one {
              z-index:5;
              display: block;
              width:18px;
              height:20px;
              position: absolute;
              top:5px;
              left:15px;
            }
            .top-img-two{
              z-index:1;
              display: block;
              width:28px;
              height:30px;
              position: absolute;
              top:0;
              left:25px;
            }
            .vibrate {
              position: relative;
              animation: vibrate 2s infinite;
            }

            @keyframes vibrate {
              0% {
                left:15px;
              }

              50% {
                left:20px;
              }

              100% {
                left:15px;
              }
            }
          }
          .top-name-p {
            flex: 1;
            line-height: 30px;
            height:30px;
            color: #fff;
            font-size: 26px;
            margin-left:10px;
          }
          .top-out-p{
            cursor: pointer;
            font-size:26px;
            line-height: 30px;
            height:30px;
            color:#fff;
            margin-right:40px;
          }
        }
        .waterAlarm-name-box{
          height:107px;
          display: flex;
          padding:0 20px;
          background-color: #01232A;
          border-bottom:1px solid #1ed0f8;
          .lv-box{
            margin-top:26px;
            width:120px;
            height:54px;
            border-radius:50px;
            div{
              margin:3px 4px;
              width:110px;
              height:46px;
              line-height:46px;
              font-size:20px;
              text-align: center;
              border-radius:50px;
            }
          }
          .type-color-a {
            border:1px solid #FF0102;
            div{
              background-color: #FF0102;
              color:#fff;
            }
          }
          .type-color-b {
            border:1px solid rgb(256, 232, 206);
            div{
              background-color: rgb(256, 232, 206);
              color:#FF9900;
            }
          }
          .type-color-c {
            border:1px solid rgb(251, 228, 206);
            div{
              background-color: rgb(251, 228, 206);
              color:#FF4800;
            }
          }
          .type-color-d {
            border:1px solid rgb(248, 206, 205);
            div{
              background-color: rgb(248, 206, 205);
              color:#FF0000;
            }
          }
          .name-p{
            width:450px;
            font-size:20px;
            line-height:107px;
            color:#fff;
            margin-left:20px;
          }
          .time-p{
            width:450px;
            font-size:20px;
            line-height:107px;
            color:#fff;
          }
        }
        .waterAlarm-big-box{
          flex:1;
          display: flex;
          padding:20px 20px 0;
          background-color: #01232A;
          border-bottom-left-radius:20px;
          border-bottom-right-radius:20px;
          .waterAlarm-left-box{
            width: 917px;
            border-radius:10px;
            overflow: hidden;
            img{
              display: block;
              /*width: 548px;*/
              /*height: 608px;*/
              width: 685px;
              height: 760px;
              margin:20px auto;
            }
          }
          .bugle-box{
            width: 917px;
            height: 236px;
            margin-top:20px;
            border-radius:10px;
            background-color: #032C32;
            display: flex;
            flex-direction: column;
            .bugle-for-button-box{
              padding:20px 20px 10px;
              .for-button-box-check{
                border:1px solid #24D1F9!important;
                color:#24D1F9!important;
              }
              .for-button-box{
                display: inline-block;
                margin:0 22px 11px 0;
                cursor: pointer;
                width:150px;
                padding:0 10px;
                height:50px;
                border:1px solid #1E768E;
                text-align: center;
                font-size:18px;
                line-height:50px;
                border-radius:5px;
                color:#fff;
                /*单行省略号*/
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
            }
            .bugle-for-text-box{
              flex:1;
              padding:10px 20px;
              .null-p{
                color:#999;
                font-size:18px;
                text-align: center;
              }
              .for-text-box{
                display: flex;
                p:nth-child(1){
                  line-height:24px;
                  font-size:18px;
                  color:#24D1F9;
                  margin-bottom:5px;
                  margin-right:10px;
                }
                p:nth-child(2){
                  line-height:24px;
                  font-size:18px;
                  color:#fff;
                  margin-bottom:5px;
                }
              }
            }
            .bugle-for-input-box{
              margin:20px;
            }
            ::v-deep .bugle-for-input-box{
              .el-input__inner{
                height:50px;
                line-height:50px;
                font-size:18px;
                background-color: rgba(0,0,0,0);
                border:1px solid #15827C;
                box-shadow:0 0 2px 1px #15827C inset;
                color:#FFFFFF;
              }
              .el-input-group__append, .el-input-group__prepend{
                height:50px;
                font-size:18px;
                cursor: pointer;
                background-color: rgba(0,0,0,0);
                color:#FFFFFF;
                border:1px solid #15827C;
                box-shadow:0 0 2px 1px #15827C inset;
              }
            }
          }
          .waterAlarm-right-box{
            width: 900px;
            margin:20px 20px 0 0;
            .waterAlarm-text-box{
              width: 900px;
              height: 270px;
              display: flex;
              .waterAlarm-text-left-box{
                width: 440px;
                height: 270px;
                margin-right:20px;
                border-radius:10px;
                background-color: #032C32;
                padding:20px 30px;
                div{
                  display: flex;
                  p{
                    color:#fff;
                    line-height:45px;
                    font-size:20px;
                  }
                  p:nth-child(1){
                  }
                  p:nth-child(2){
                    flex:1;
                  }
                }
              }
              .waterAlarm-text-right-box{
                width: 440px;
                height: 270px;
                border-radius:10px;
                background-color: #032C32;
                padding:20px 30px;
                .box-one{
                  display: flex;
                  p{
                    color:#fff;
                    line-height:45px;
                    font-size:20px;
                  }
                  p:nth-child(1){
                  }
                  p:nth-child(2){
                    flex:1;
                  }
                }
                .box-two{
                  display: flex;
                  .box-tile-p{
                    color:#fff;
                    line-height:45px;
                    font-size:20px;
                  }
                  .box-two-box{
                    flex:1;
                    .box-two-box-min{
                      display: inline-block;
                      div{
                        display: flex;
                        p:nth-child(1){
                          background-color: #11C01D;
                          font-size:20px;
                          border-radius:50%;
                          width:26px;
                          height:26px;
                          color:#fff;
                          line-height:27px;
                          text-align: center;
                          margin:9px;
                        }
                        p:nth-child(2){
                          font-size:20px;
                          line-height:45px;
                          color:#fff;
                        }
                      }
                    }
                  }
                }
              }
            }
            .waterAlarm-sensor-box{
              width: 900px;
              height: 130px;
              background-color: #032C32;
              border-radius:10px;
              margin-bottom:20px;
              display: flex;
              p{
                color:#fff;
                font-size:26px;
                line-height:130px;
              }
              p:nth-child(1){
                margin-left:30px;
              }
              p:nth-child(2){
                margin-left:60px;
              }
            }
            .waterAlarm-img-box{
              width: 900px;
              height: 236px;
              background-color: #032C32;
              border-radius:10px;
              margin-top:20px;
              overflow: hidden;
              .img-title-p{
                font-size:22px;
                height:22px;
                line-height:22px;
                margin:20px 0 20px 30px;
                color:#fff;
              }
              .for-max-box{
                img{
                  cursor: pointer;
                  display:inline-block;
                  width:267px;
                  height:150px;
                  border-radius:10px;
                  margin-left:25px;
                }
              }
              .img-null-p{
                line-height:150px;
                text-align: center;
                font-size:20px;
                color:#999;
              }
            }
          }
          .lookImg{
            display: block;
            width:1449px;
            height:815px;
            margin:20px auto 0;
          }
        }
        .waterAlarm-bottom-button-box{
          display: flex;
          height:81px;
          .null-p{
            flex:1;
          }
          .button-out-p{
            cursor: pointer;
            border:1px solid #15827C;
            background-color: #000F14;
            color:#15827C;
            width:162px;
            height:54px;
            line-height:54px;
            font-size:20px;
            text-align: center;
            border-radius:50px;
            margin-top:27px;
          }
          .button-finish-p{
            cursor: pointer;
            border:1px solid #15827C;
            background-color: #15827C;
            color:#fff;
            width:162px;
            height:54px;
            line-height:54px;
            font-size:20px;
            text-align: center;
            border-radius:50px;
            margin-top:27px;
            margin-left:64px;
          }
        }
      }
    }
    .waterAlarm-scrollbar{
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .waterAlarm-scrollbar::-webkit-scrollbar {
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 8px;
    }
    .waterAlarm-scrollbar::-webkit-scrollbar-thumb {
      border-radius: 6px;
      -webkit-box-shadow: inset 0 0 5px #15827C;
      background: #15827C;
    }
    .waterAlarm-scrollbar::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(3,44,50,0);
      border-radius: 0;
      background:  rgba(3,44,50,0);
    }
  }
</style>