From 5b7c0f51b274d83c68a2c4a73de118145370f8d1 Mon Sep 17 00:00:00 2001
From: 叶松 <2217086471@qq.com>
Date: 星期三, 18 十月 2023 13:20:39 +0800
Subject: [PATCH] 报警提示位置修改
---
web/src/App.vue | 95 -----------------------
web/src/views/LayoutIndex/index.vue | 93 +++++++++++++++++++++++
2 files changed, 96 insertions(+), 92 deletions(-)
diff --git a/web/src/App.vue b/web/src/App.vue
index e7defbc..0b4f5f3 100644
--- a/web/src/App.vue
+++ b/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;
diff --git a/web/src/views/LayoutIndex/index.vue b/web/src/views/LayoutIndex/index.vue
index b137c47..2dd17a2 100644
--- a/web/src/views/LayoutIndex/index.vue
+++ b/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%;
--
Gitblit v1.9.3