报警提示位置修改

叶松

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;