328 lines
8.2 KiB
Plaintext
328 lines
8.2 KiB
Plaintext
<template>
|
||
<el-container class="padding-0 height100">
|
||
|
||
<el-header class="padding-0">
|
||
|
||
<div class="layout-header-bar layout-header " :style=" 'background: url('+avatarBgImg+') no-repeat center top;'">
|
||
<div class="">
|
||
<img style="cursor:pointer;" src="@/assets/img/home/men_logo@2x.png" height="26px" class="margin-t-15 margin-l-5 inlineBlock" @click="handleCommand" />
|
||
<!-- <span class="headertor-con align-items-center float-l margin-r-10 opacitys inlineBlock" id="alarm-hover">
|
||
<el-badge style="position: relative; top: 2px;">
|
||
<i class="ivu-icon ivu-icon-bell"></i>
|
||
</el-badge>
|
||
</span> -->
|
||
<!-- 头像 退出登陆 -->
|
||
<!-- <span class=" float-r inlineBlock margin-t-15 margin-r-5" style ="float:right;" id="dropdown-hover">
|
||
<span style="position: relative; top: 1px;">
|
||
<img class="ivu-avatar_user margin-t-5" src="@/assets/img/home/men_users@2x.png" >
|
||
<span >{{nick}}</span>
|
||
<img class="margin-l-5" src="@/assets/img/home/icon_down@2x.png">
|
||
</span>
|
||
</span> -->
|
||
<el-tooltip style ="float:right;" class=" inlineBlock margin-t-20 margin-r-5" effect="dark" content="退出系统" placement="top-start">
|
||
<i class="el-icon-switch-button" style="color:white;" @click="logout" />
|
||
</el-tooltip>
|
||
|
||
</div>
|
||
<slot></slot>
|
||
<!-- <div class="float-r color1 height100"> -->
|
||
|
||
<!-- <div class="headertor-con align-items-center float-l margin-r-10 opacitys" id="alarm-hover">
|
||
<el-badge style="position: relative; top: 2px;">
|
||
<i class="ivu-icon ivu-icon-bell"></i>
|
||
</el-badge>
|
||
</div>
|
||
<div class="headertor-con align-items-center float-l" id="dropdown-hover">
|
||
<span style="position: relative; top: 1px;">
|
||
<img class="ivu-avatar_user margin-t-5" src="@/assets/img/home/men_users@2x.png" >
|
||
<span >{{nick}}</span>
|
||
<img class="margin-l-5" src="@/assets/img/home/icon_down@2x.png">
|
||
</span>
|
||
</div> -->
|
||
<!-- </div> -->
|
||
</div>
|
||
</el-header>
|
||
<ul id= "dropdown-menu" :style=" 'background: url('+avatarBgImg+') no-repeat center top;'">
|
||
<li @click="handleCommand">退出登录</li>
|
||
</ul>
|
||
<ul id="alarm-menu" style="background-color: #020337">
|
||
<li style="display:flex;">
|
||
<p style="margin:0 0 0 10px">工单统计</p>
|
||
<p style="min-width:18px;height:18px;border-radius:100%;font-size:10px;background:#f00;margin:12px 0 0 10px;">{{workSheetNumber}}</p>
|
||
</li>
|
||
<li style="display:flex;">
|
||
<p style="margin:0 0 0 10px">告警统计</p>
|
||
<p style="min-width:18px;height:18px;border-radius:100%;font-size:10px;background:#f00;margin:12px 0 0 10px;">{{alarmNumber}}</p>
|
||
</li>
|
||
</ul>
|
||
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
import { mapGetters } from 'vuex';
|
||
import gotoLogin from '@/utils/login-center'
|
||
|
||
export default {
|
||
components: {
|
||
|
||
},
|
||
data: function() {
|
||
return {
|
||
queryFlag:true,
|
||
avatarBgImg:require('@/assets/img/home/top_bg.png'),
|
||
userName:'',
|
||
nick:"",
|
||
alarmNumber:0,
|
||
workSheetNumber:0,
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'avatar',
|
||
'returnGo'
|
||
])
|
||
},
|
||
mounted() {
|
||
console.log('cloud头部')
|
||
this.userName = localStorage.getItem('CLOUD_USERNAME');
|
||
this.nick = localStorage.getItem('CLOUD_NICK');
|
||
// this.getAlarmNumber();
|
||
// this.getWorkSheetNumber();
|
||
this.subMenuIfShow();
|
||
this.subAlarmMenuIfShow(this);
|
||
},
|
||
methods: {
|
||
logout()
|
||
{
|
||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$store.dispatch('LogOut').then(() => {
|
||
new gotoLogin().gotoLogin();
|
||
|
||
})
|
||
})
|
||
},
|
||
handleSelect(key, keyPath) {
|
||
console.log(key, keyPath);
|
||
},
|
||
//打开快捷路由弹框
|
||
onDialogNav(){
|
||
this.$refs.dialogNav.dialogVisible = true;
|
||
},
|
||
//点击头像下拉菜单返回登陆页
|
||
handleCommand() {
|
||
localStorage.clear();
|
||
this.$router.push({path: '/login'});
|
||
// this.$Login.logout().then((data) => {
|
||
//
|
||
// if (data.data.code == 200) {
|
||
//
|
||
// }
|
||
// })
|
||
},
|
||
//告警数量
|
||
getAlarmNumber(){
|
||
// this.queryFlag=false;
|
||
// this.$EquipmentMonitoring.getAlarmInformationCount().then((data) => {
|
||
// if (data.data.code == 200) {
|
||
// this.alarmNumber = data.data.data.count;
|
||
// }
|
||
// })
|
||
},
|
||
//工单数量
|
||
getWorkSheetNumber(){
|
||
// this.$EquipmentMonitoring.getOrderCount().then((data) => {
|
||
// if (data.data.code == 200) {
|
||
// this.queryFlag=true;
|
||
// this.workSheetNumber = data.data.data.count
|
||
//
|
||
// }
|
||
//
|
||
// })
|
||
},
|
||
|
||
//参数n为休眠时间，单位为毫秒:
|
||
sleep(n) {
|
||
var start = new Date().getTime();
|
||
// console.log('休眠前：' + start);
|
||
while (true) {
|
||
if (new Date().getTime() - start > n) {
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
//下拉导航的显示与隐藏
|
||
subMenuIfShow(){
|
||
|
||
// $("#dropdown-hover, #dropdown-menu").mouseover(function(){
|
||
// $("#dropdown-hover").css("background-color","#0169EA");
|
||
// $("#dropdown-menu").show();
|
||
// });
|
||
|
||
// $("#dropdown-hover, #dropdown-menu").mouseout(function(){
|
||
// $("#dropdown-hover").css("background-color","transparent");
|
||
// $("#dropdown-menu").hide();
|
||
// });
|
||
|
||
// $("#dropdown-menu li").click(function(){
|
||
// $("#dropdown-hover").css("background-color","transparent");
|
||
// $("#dropdown-menu").hide();
|
||
// });
|
||
},
|
||
//下拉导航的显示与隐藏
|
||
subAlarmMenuIfShow(target){
|
||
// $("#alarm-hover").mouseenter(()=>{
|
||
// if (target.queryFlag) {
|
||
// target.getAlarmNumber();
|
||
// target.getWorkSheetNumber();
|
||
// }
|
||
// });
|
||
|
||
|
||
// $("#alarm-hover").mouseover(function(){
|
||
|
||
// $("#alarm-hover").css("background-color","#0169EA");
|
||
// $("#alarm-menu").show();
|
||
|
||
// });
|
||
// $("#alarm-menu").mouseover(function(){
|
||
// $("#alarm-hover").css("background-color","#0169EA");
|
||
// $("#alarm-menu").show();
|
||
// });
|
||
|
||
// $("#alarm-hover").mouseout(function(){
|
||
// $("#alarm-hover").css("background-color","transparent");
|
||
// $("#alarm-menu").hide();
|
||
// });
|
||
// $(" #alarm-menu").mouseout(function(){
|
||
// $("#alarm-hover").css("background-color","transparent");
|
||
// $("#alarm-menu").hide();
|
||
// });
|
||
// $("#alarm-menu li").click(function(){
|
||
// $("#alarm-hover").css("background-color","transparent");
|
||
// $("#alarm-menu").hide();
|
||
// });
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
|
||
>>>.cloudLsit {
|
||
color: #ffffff;
|
||
border-radius: 3px;
|
||
width: 100%;
|
||
cursor: pointer;
|
||
margin: 10px;
|
||
text-align: center;
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.ivu-avatar_user {
|
||
width: 18px;
|
||
height: 22px;
|
||
float: left;
|
||
margin-right: 8px;
|
||
bottom: 6px;
|
||
position: relative;
|
||
}
|
||
|
||
>>>.ivu-icon-bell:before{
|
||
content: " ";
|
||
display: block;
|
||
width: 22px;
|
||
height:22px;
|
||
background: url(../../assets/img/home/men_xiaoxi@2x.png) no-repeat;
|
||
background-size: 22px 22px;
|
||
}
|
||
|
||
>>>.cloudLsit:hover {
|
||
opacity: .8;
|
||
}
|
||
|
||
>>>.el-badge__content {
|
||
border: 0;
|
||
}
|
||
|
||
>>>.el-menu-item {
|
||
font-size: 16px;
|
||
}
|
||
|
||
>>>.el-dropdown {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.layout-header {
|
||
position: relative;
|
||
z-index: 100;
|
||
flex: 0 0 auto;
|
||
height: 60px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
.layout-header-bar .align-items-center {
|
||
transform: rotate(0deg);
|
||
transition: all .3s ease;
|
||
}
|
||
|
||
.layout-header-bar .align-items-center.rotate-90deg {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.layout-header-bar .headertor-con {
|
||
height: 100%;
|
||
padding: 0 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.layout-header-bar .headerIcon:hover {
|
||
color: #0037BF !important;
|
||
}
|
||
|
||
>>>#dropdown-menu , #alarm-menu{
|
||
position:fixed;
|
||
top:59px;
|
||
right:0;
|
||
display:none;
|
||
}
|
||
|
||
>>>#alarm-menu{
|
||
right:56px;
|
||
}
|
||
|
||
>>>#dropdown-menu li ,#alarm-menu li{
|
||
list-style:none;
|
||
text-align:center;
|
||
background:#0037BF;
|
||
color:#fff;
|
||
width:107px;
|
||
cursor:pointer
|
||
}
|
||
|
||
>>>#dropdown-menu li{
|
||
line-height:42px;
|
||
}
|
||
|
||
>>>#alarm-menu li p:first-child{
|
||
height:42px;
|
||
line-height:42px;
|
||
}
|
||
|
||
>>>#dropdown-menu li:hover , #alarm-menu li:hover{
|
||
background:#0169EA;
|
||
}
|
||
|
||
>>>#home-hover:hover,#menu-hover:hover{
|
||
background:#0037BF;
|
||
}
|
||
|
||
.el-menu-demo{
|
||
border: 0px;
|
||
}
|
||
</style>
|