|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<div class="pageBox"> |
|
|
|
<HeaderMenu class="header" :style="headerStyle"/> |
|
|
|
<!-- @onChange="handleChange" --> |
|
|
|
<HeaderMenu class="header" :style="headerStyle" /> |
|
|
|
<!-- @onChange="handleChange" --> |
|
|
|
<Adaptation class="content" :headerHeight="headerHeight"> |
|
|
|
<Transition name="fade"> |
|
|
|
<router-view v-if="isShowContent" /> |
|
|
|
@ -15,6 +15,7 @@ import HeaderMenu from "./components/HeaderMenu/index.vue"; |
|
|
|
import Adaptation from "./components/Adaptation.vue"; |
|
|
|
import getBoardBaseData from '@/common/getBoardBaseData' |
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
import moment from "moment"; |
|
|
|
export default { |
|
|
|
name: "ji_ze_gao_su", |
|
|
|
components: { |
|
|
|
@ -24,6 +25,8 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
notifications: [], |
|
|
|
notifyIndex:0, |
|
|
|
isShowContent:false, |
|
|
|
headerHeight:100, |
|
|
|
header: { |
|
|
|
@ -57,6 +60,102 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
|
|
|
|
let _this = this; |
|
|
|
document.onkeydown = function(e){ |
|
|
|
|
|
|
|
if(e.code == 'Space'){ |
|
|
|
let obj = { |
|
|
|
content: "一个沙雕横穿马路导致堵车，他还不承认，不知道怎么办，请求指导，在线等。", |
|
|
|
time:moment().format("yyyy-MM-DD hh:mm"), |
|
|
|
type : "3", |
|
|
|
level: ["info", "danger"][_this.notifyIndex%2] |
|
|
|
} |
|
|
|
|
|
|
|
_this.notifications[_this.notifyIndex] = _this.$notify({ |
|
|
|
title: '', |
|
|
|
dangerouslyUseHTMLString: true, |
|
|
|
duration: 0, |
|
|
|
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-pedestrian' } |
|
|
|
) |
|
|
|
] |
|
|
|
), |
|
|
|
|
|
|
|
_this.$createElement( |
|
|
|
"span", |
|
|
|
{ class: 'info' }, |
|
|
|
[ |
|
|
|
_this.$createElement( |
|
|
|
"span", |
|
|
|
{ class: 'content' }, |
|
|
|
obj.content |
|
|
|
) |
|
|
|
, |
|
|
|
_this.$createElement( |
|
|
|
"div", |
|
|
|
{class: 'time'}, |
|
|
|
obj.time |
|
|
|
) |
|
|
|
] |
|
|
|
), |
|
|
|
|
|
|
|
] |
|
|
|
), |
|
|
|
|
|
|
|
] |
|
|
|
), |
|
|
|
}); |
|
|
|
_this.notifyIndex ++; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// this.$store.commit("menu/resetRecent"); |
|
|
|
getBoardBaseData().then(res => { |
|
|
|
this.isShowContent = true; |
|
|
|
@ -71,6 +170,19 @@ export default { |
|
|
|
this.calcHeaderScale(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//点击事件回调 |
|
|
|
closeNotify(para) { |
|
|
|
let type = para.type; |
|
|
|
console.log("hahah"); |
|
|
|
console.log(type); |
|
|
|
if (type === '2') { |
|
|
|
console.log("自动关闭，流程。。"); |
|
|
|
} |
|
|
|
if (type === '3') { |
|
|
|
console.log("手动确认，流程。。"); |
|
|
|
} |
|
|
|
this.notifications[para.index].close(); |
|
|
|
}, |
|
|
|
calcHeaderScale(){ |
|
|
|
let winW = window.innerWidth; |
|
|
|
this.header.scale = winW / this.header.originW; |
|
|
|
@ -135,3 +247,101 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
|
|
|
.notify_whole { |
|
|
|
padding: 0; |
|
|
|
width: 420px !important; |
|
|
|
// height: 120px !important; |
|
|
|
margin-top: 50px !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%; background-image: linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%); |
|
|
|
border: 1px solid; border-image: linear-gradient(180deg, rgba(78, 174, 204, 1), rgba(78, 174, 204, 0)) 2 2; |
|
|
|
.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> |
|
|
|
|
