<template>
|
<div id="app">
|
<transition>
|
<router-view />
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
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>
|
|
<style lang="scss">
|
html,
|
body,
|
#app {
|
margin: 0;
|
padding: 0;
|
width: 100%;
|
height: 100%;
|
font-size: calc(100vw / 137);
|
// font-size: 14px;
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
overflow: hidden;
|
|
.el-tooltip__popper {
|
max-width: 800px;
|
}
|
}
|
.el-notification{
|
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;
|
}
|
.el-year-table td .cell{
|
color: #fff;
|
}
|
.el-picker-panel__icon-btn{
|
color: #fff;
|
}
|
.el-year-table td.today .cell{
|
color: #1890ff ;
|
font-weight: bold
|
}
|
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
|
-webkit-appearance: none;
|
appearance: none;
|
margin: 0;
|
}
|
</style>
|
