<template>
|
<div class="layout">
|
<Layout>
|
<Header>
|
<Menu mode="horizontal" theme="dark" :active-name="getActiveName" @on-select="changeDataPage">
|
<div class="layout-logo">
|
新能源充电桩在线巡检系统
|
</div>
|
<div class="layout-nav">
|
<MenuItem name="home" to="/index">
|
<Icon type="ios-home" />
|
<span>首页</span>
|
</MenuItem>
|
<MenuItem name="control" @click="toDataControl()">
|
<Icon type="ios-stats" />
|
<span>实时监控</span>
|
</MenuItem>
|
<MenuItem name="history" @click="toDataHistory()">
|
<Icon type="ios-paper"/>
|
<span>历史数据</span>
|
</MenuItem>
|
<!-- <MenuItem name="4">
|
<Icon type="ios-notifications" />
|
<span>告警管理</span>
|
</MenuItem>
|
<MenuItem name="5">
|
<Icon type="ios-settings" />
|
<span>系统管理</span>
|
</MenuItem> -->
|
</div>
|
<div class="user-info-menu">
|
<Avatar style="background-color: #87d068" icon="ios-person" />
|
<Dropdown trigger="hover" style="margin-left: 8px; color: #FFFFFF" @on-click="userDropDown">
|
<a href="javascript:void(0)" style="color: #FFFFFF">
|
{{getUserName}}
|
<Icon type="ios-arrow-down"></Icon>
|
</a>
|
<DropdownMenu slot="list">
|
<DropdownItem>密码修改</DropdownItem>
|
<DropdownItem name="exitSystem">退出系统</DropdownItem>
|
</DropdownMenu>
|
</Dropdown>
|
<!-- <Tooltip :content="warnStatus.tooltip" placement="bottom">
|
<span style="font-size: 22px; margin-left:8px"><Icon :type="warnStatus.type" @click="toggleWarnStatus"/></span>
|
</Tooltip> -->
|
<!-- <audio src="./music/smoke_alarm.mp3" controls="controls" autoplay="autoplay"></audio> -->
|
</div>
|
</Menu>
|
</Header>
|
<Content class="main-page-content" :style="{padding: '1px', minHeight: '280px', background: '#fff', overflowY: 'auto' }">
|
<router-view></router-view>
|
</Content>
|
</Layout>
|
</div>
|
</template>
|
<script>
|
export default {
|
data: function() {
|
return {
|
activeName: '', // 当前页面所在的路由
|
warnStatus: {
|
type: 'ios-notifications',
|
tooltip: '点击关闭告警音'
|
}
|
}
|
},
|
methods:{
|
changeDataPage: function(name) {
|
// 设置主导航
|
this.$store.commit('setActiveName', name);
|
switch(name) {
|
case 'control':
|
case 'history':
|
this.$router.push('/index/data/');
|
this.$bus.$emit('changePageState', name);
|
break;
|
}
|
},
|
openWarnStatus: function() {
|
this.warnStatus = {
|
type: 'ios-notifications',
|
tooltip: '点击关闭告警音'
|
};
|
},
|
offWarnStatus: function() {
|
this.warnStatus = {
|
type: 'ios-notifications-off',
|
tooltip: '点击开启告警音'
|
};
|
},
|
toggleWarnStatus: function() {
|
if(this.warnStatus.type == 'ios-notifications') {
|
this.offWarnStatus();
|
}else {
|
this.openWarnStatus();
|
}
|
},
|
userDropDown: function(name) {
|
// 根据点击的内容触发事件
|
switch(name) {
|
case 'exitSystem':
|
this.exitSystem();
|
break;
|
}
|
},
|
exitSystem: function() {
|
var _self = this;
|
//console.log(this.$router);
|
this.$Modal.warning({
|
title: '系统提示',
|
content: '按ESC关闭面板,点击确定退出系统',
|
closable: true,
|
onOk: function() {
|
_self.$store.commit('setLogin', false);
|
_self.$router.push('/');
|
}
|
});
|
}
|
},
|
computed: {
|
getActiveName: function() {
|
// console.log(this.$store.getters.getActiveName);
|
return this.$store.getters.getActiveName;
|
},
|
getUserName: function() {
|
return this.$store.state.userName;
|
}
|
},
|
mounted: function() {
|
var _self = this;
|
}
|
}
|
</script>
|
<style scoped>
|
.layout-logo{
|
padding: 0 16px;
|
height: 36px;
|
line-height: 36px;
|
font-size: 20px;
|
font-weight: bold;
|
letter-spacing: 4px;
|
color: #FFFFFF;
|
border-radius: 3px;
|
float: left;
|
position: relative;
|
top: 15px;
|
left: 20px;
|
}
|
.layout-nav{
|
width: 400px;
|
margin: 0 auto;
|
margin-right: 60px;
|
}
|
.user-info-menu {
|
color: #FFFFFF;
|
}
|
.user-info-menu-icon {
|
display: inline-block;
|
text-align: center;
|
font-size: 18px;
|
color: #fff;
|
white-space: nowrap;
|
position: relative;
|
overflow: hidden;
|
vertical-align: middle;
|
width: 32px;
|
height: 32px;
|
line-height: 32px;
|
border-radius: 16px;
|
background-color: #87d068;
|
}
|
.main-page-content {
|
height: calc(100vh - 64px);
|
}
|
</style>
|
