13 changed files with 654 additions and 455 deletions
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,305 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import moment from "moment"; |
||||
|
export default { |
||||
|
name: "WarningNotify", |
||||
|
props: { |
||||
|
|
||||
|
}, |
||||
|
provide() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
notifications: [], |
||||
|
notifyIndex: 0, |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
//点击事件回调 |
||||
|
closeNotify(para) { |
||||
|
// let type = para.type; |
||||
|
this.notifications[para.index].close(); |
||||
|
}, |
||||
|
showNotify(para){ |
||||
|
let _this = this; |
||||
|
let obj = { |
||||
|
content: "这里是从websocket收到的告警内容，最少一行，最多三行，多了就隐藏掉，这是演示的三行的效果。", |
||||
|
time: moment().format("yyyy-MM-DD hh:mm"), |
||||
|
type: ["pedestrian", "car", "pedestrian"][_this.notifyIndex % 3], |
||||
|
level: ["info", "danger"][_this.notifyIndex % 2], |
||||
|
duration: 0 |
||||
|
} |
||||
|
|
||||
|
_this.notifications[_this.notifyIndex] = _this.$notify({ |
||||
|
title: '', |
||||
|
dangerouslyUseHTMLString: true, |
||||
|
duration: obj.duration, |
||||
|
customClass: 'notify_whole', |
||||
|
offset: 50, |
||||
|
showClose: false, |
||||
|
message: _this.$createElement( |
||||
|
"div", |
||||
|
{ class: "notify_box " + obj.level }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"div", |
||||
|
{ class: 'nofify_head' }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"p", |
||||
|
{ class: "title" }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"i", |
||||
|
{ class: 'icon el-icon-warning' } |
||||
|
), _this.$createElement( |
||||
|
"span", |
||||
|
{ class: 'text' }, |
||||
|
"告警" |
||||
|
) |
||||
|
] |
||||
|
) |
||||
|
, _this.$createElement( |
||||
|
"button", |
||||
|
{ |
||||
|
class: 'btn_close el-icon-close', |
||||
|
on: { |
||||
|
click: _this.closeNotify.bind(_this, { type: obj.type, index: _this.notifyIndex }), |
||||
|
}, |
||||
|
} |
||||
|
) |
||||
|
] |
||||
|
), |
||||
|
_this.$createElement( |
||||
|
"div", |
||||
|
{ class: 'nofify_content' }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"span", |
||||
|
{ class: 'type_icon' }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"i", |
||||
|
{ class: 'iconfont icon-' + obj.type } |
||||
|
) |
||||
|
] |
||||
|
), |
||||
|
|
||||
|
_this.$createElement( |
||||
|
"div", |
||||
|
{ class: 'info' }, |
||||
|
[ |
||||
|
_this.$createElement( |
||||
|
"p", |
||||
|
{ class: 'content' }, |
||||
|
obj.content |
||||
|
) |
||||
|
, |
||||
|
_this.$createElement( |
||||
|
"p", |
||||
|
{ class: 'time' }, |
||||
|
obj.time |
||||
|
) |
||||
|
] |
||||
|
), |
||||
|
|
||||
|
] |
||||
|
), |
||||
|
|
||||
|
] |
||||
|
), |
||||
|
}); |
||||
|
_this.notifyIndex++; |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.notify_whole { |
||||
|
padding: 0; |
||||
|
width: 420px !important; |
||||
|
// height: 120px !important; |
||||
|
margin-top: 40px !important; |
||||
|
background: none; |
||||
|
border: none; |
||||
|
border-radius: 0; |
||||
|
} |
||||
|
|
||||
|
.el-notification__group { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.el-notification__content { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.notify_box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: 1px solid; |
||||
|
|
||||
|
.nofify_head { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: 44px; |
||||
|
align-items: center; |
||||
|
margin: 0 12px; |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
|
||||
|
.icon { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-size: 17px; |
||||
|
margin-left: 4px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn_close { |
||||
|
background: none; |
||||
|
border: none; |
||||
|
cursor: pointer; |
||||
|
font-size: 20px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nofify_content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 20px 20px 16px 0; |
||||
|
|
||||
|
.type_icon { |
||||
|
width: 80px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.iconfont { |
||||
|
font-size: 48px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
flex: 1; |
||||
|
|
||||
|
.content { |
||||
|
color: #FFF; |
||||
|
font-size: 16px; |
||||
|
word-wrap: break-word; |
||||
|
white-space: wrap; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
color: #FFF; |
||||
|
font-size: 14px; |
||||
|
opacity: 0.5; |
||||
|
text-align: right; |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$infoColor: #3DE8FF; |
||||
|
$dangerColor: #FF5F5F; |
||||
|
|
||||
|
.notify_box.info { |
||||
|
background-image: linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%); |
||||
|
border-image: linear-gradient(180deg, rgba(78, 174, 204, 1), rgba(78, 174, 204, 0)) 2 2; |
||||
|
|
||||
|
.nofify_head { |
||||
|
border-bottom: 1px solid #FFFFFF33; |
||||
|
|
||||
|
.title { |
||||
|
.icon { |
||||
|
color: $infoColor; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
color: $infoColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn_close { |
||||
|
color: $infoColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nofify_content { |
||||
|
.type_icon { |
||||
|
.iconfont { |
||||
|
color: $infoColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
.content {} |
||||
|
|
||||
|
.time {} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.notify_box.danger { |
||||
|
background-image: linear-gradient(180deg, rgba(30, 0, 0, 0.9) 0%, rgba(111, 0, 0, 0.9) 100%); |
||||
|
border-image: linear-gradient(180deg, rgba(237, 147, 128, 1), rgba(239, 146, 157, 0)) 2 2; |
||||
|
|
||||
|
.nofify_head { |
||||
|
border-bottom: 1px solid #FFFFFF33; |
||||
|
|
||||
|
.title { |
||||
|
.icon { |
||||
|
color: $dangerColor; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
color: $dangerColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn_close { |
||||
|
color: $dangerColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nofify_content { |
||||
|
.type_icon { |
||||
|
.iconfont { |
||||
|
color: $dangerColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
.content {} |
||||
|
|
||||
|
.time {} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue