报警提示位置修改

叶松

2023-10-18 5b7c0f51b274d83c68a2c4a73de118145370f8d1

报警提示位置修改

 web/src/App.vue

@@ -12,52 +12,14 @@
  name: 'App',
  data(){
    return{
      closeNotify:null,
      timer:null,//定时器
      alarmList:[
      ],//报警信息组
      
    }
  },
  mounted(){
    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)
          }
        })
      },
      
  }
}
</script>
@@ -85,58 +47,7 @@
  background: url("./assets/alarm_bg.png") no-repeat;
  background-size: 100% 100%;
}
.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;
    }
  }
}

.el-form-item {
  margin-bottom: 1.5rem;

 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%;