| | |
| | | } |
| | | }; |
| | | return { |
| | | closeNotify:null, |
| | | timer:null,//定时器 |
| | | alarmList:[ |
| | | ],//报警信息组 |
| | | size: changeSize(), |
| | | realName:sessionStorage.getItem('realName'), |
| | | asyncPassword: false, // 修改密码 |
| | |
| | | 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'){ |
| | |
| | | |
| | | <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%; |