张晓波
2023-10-18 c84b78391bbc6ff68ffb4a1e55ff9b603fa697dc
web/src/views/LayoutIndex/index.vue
@@ -98,6 +98,10 @@
      }
    };
    return {
      closeNotify:null,
      timer:null,//定时器
      alarmList:[
      ],//报警信息组
      size: changeSize(),
      realName:sessionStorage.getItem('realName'),
      asyncPassword: false, // 修改密码
@@ -129,8 +133,45 @@
        meta: item.meta
      }
    })
    this.timer = setInterval(()=>{
      this.getAlarmDatas()
    },60000)
  },
  methods: {
    //展示报警信息
    showAlarmTips(){
      const h = this.$createElement
      this.alarmList.forEach((item)=>{
        this.closeNotify =window.setTimeout(()=>{
            this.$notify({
              position: 'bottom-right',
              showClose:true,
              duration:5000,
              dangerouslyUseHTMLString: true,
              message:h("div",{class:"alarm_tips"},[
                h("div",{class:"alarm_tip_header"},[
                  h("div",{class:"alarm_tip_text"},'钢筋预警'),
                ]),
                h("div",{class:"alarm_tip_content"},[
                  h("div",{class:'alarm_tip_content_text'},`${item.steelName}`),
                  h("div",{class:"alarm_tip_content_datas"},'已低于预警库存')
                ]),
              ])
            });
        },0)
      })
    },
    //获取报警数据
      getAlarmDatas(){
        this.$api.Rebar.alarmTipsBear({}).then(res=>{
        if(res.statusMsg =='ok'){
          this.alarmList = res.data
          this.showAlarmTips()
        }else{
          this.$message.warning(res.statusMsg)
        }
      })
    },
    // 退出登录
    quitSystem(val) {
      if(val === 'logout'){
@@ -190,6 +231,58 @@
<style lang="scss" scoped>
@import '../../style/layout-main.scss';
.alarm_tips{
  display: flex;
  flex-direction: column;
  position: relative;
  line-height: 45px;
  .alarm_tip_header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: -20px;
    .alarm_tip_text{
      color:#fff;
      font-size: 16px;
      margin-left: 10px;
      padding-right:35px;
      position: relative;
      &::before{
        content: "";
        position: absolute;
        top: 14px;
        left: -20px;
        width: 15px;
        height: 15px;
        background: url("../../assets/alarm_icons.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .alarm_tip_time{
      color: #999;
    }
    .alarm_tip_close{
      color: #f42829;
      cursor: pointer;
    }
  }
  .alarm_tip_content{
    display: flex;
    padding-top: 5px;
    .alarm_tip_content_text{
      padding-top: 15px;
      color: #f42829;
    }
    .alarm_tip_content_datas{
      padding-left: 15px;
      padding-top: 15px;
      color: #fff;
    }
  }
}
.layout {
  width: 100%;
  height: 100%;