<template>
|
<div class="page-header">
|
<div class="page-header-left">
|
<div class="nav">
|
<ul>
|
<li @click="showBattTree">
|
<i class="el-icon-s-home"></i>
|
<a href="javascript:;">电池组列表</a>
|
</li>
|
<li
|
v-for="(nav, key) in navs"
|
:key="key"
|
:class="{'nav_active': key==$store.state.navActive}"
|
@click="handleNavClick(key, nav.to)">
|
<i :class="nav.icon"></i>
|
<a href="javascript:;">{{nav.txt}}</a>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="page-header-content">
|
<!-- <div class="page-header-title">大屏数据监控</div> -->
|
<!-- <div class="page-header-subtitle">{{$store.getters.getFullName}}</div> -->
|
<div class="page-header-title">{{$store.getters.getFullName}}</div>
|
</div>
|
<div class="page-header-right">
|
<div class="btn_grp">
|
<div class="btn_3d" v-if="'/history' != $route.path" @click="showSettings">告警参数设置</div>
|
<div class="btn_3d" @click="back">综合页面</div>
|
</div>
|
<div class="page-header-time">{{time}}</div>
|
</div>
|
<el-drawer
|
title="我是标题"
|
custom-class="theme-dark"
|
size="20rem"
|
:visible.sync="drawer"
|
:withHeader="false"
|
direction="ltr">
|
<home-tree ref="battTree" @select-click="treeSelect"></home-tree>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import HomeTree from '../components/HomeTree'
|
|
export default {
|
components: {
|
HomeTree
|
},
|
data() {
|
return {
|
time: 'xxxx年xx月xx日-xx时xx分xx秒',
|
interval: '',
|
active: 0,
|
drawer: false,
|
navs: [
|
{
|
icon: 'el-icon-video-camera-solid',
|
to: '/',
|
txt: '实时监控'
|
},
|
{
|
icon: 'el-icon-s-marketing',
|
to: '/history',
|
txt: '历史监控'
|
}
|
],
|
}
|
},
|
methods: {
|
startInterval() {
|
var date = new Date().format("yyyy年MM月dd日-hh时mm分ss秒");
|
this.time = date;
|
this.interval = setInterval(()=>{
|
var date = new Date().format("yyyy年MM月dd日-hh时mm分ss秒");
|
this.time = date;
|
}, 1000);
|
},
|
back () {
|
window.open('/DyEnvir_system/', '_self');
|
},
|
handleNavClick: function(key, to) {
|
if(this.$store.state.navActive != key) {
|
this.$store.state.navActive = key;
|
if(to) {
|
this.$router.replace({
|
path: to
|
});
|
}
|
}
|
|
},
|
treeSelect: function(data) {
|
// 修改名称
|
this.$store.dispatch('changeBattGroup', data);
|
// 关闭面板
|
this.drawer = false;
|
},
|
showBattTree () {
|
this.drawer = true;
|
this.$nextTick(() => {
|
this.$refs['battTree'].setCurrent(this.$store.state.battGroup.BattGroupId);
|
});
|
}
|
,showSettings () {
|
this.$event.$emit('showSettings');
|
}
|
},
|
mounted(){
|
// 启动时间计时器
|
this.startInterval();
|
},
|
destroyed() {
|
clearInterval(this.interval);
|
}
|
}
|
</script>
|
|
<style scoped>
|
.page-header {
|
height: 4rem;
|
background: url('../assets/images/head_bg.png') no-repeat;
|
background-size: 100% 100%;
|
position: relative;
|
}
|
.page-header-left,
|
.page-header-right {
|
position: absolute;
|
top: 0;
|
height: 2.5rem;
|
}
|
.page-header-left {
|
left: 0;
|
}
|
.page-header-right {
|
right: 1rem;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.btn_grp {
|
padding-top: 10px;
|
padding-right: 20px;
|
display: -webkit-flex;
|
display: flex;
|
}
|
.btn_grp .btn_3d {
|
/*width: 6em;*/
|
padding-left: 1em;
|
padding-right: 1em;
|
margin-left: .6em;
|
font-size: .8rem;
|
}
|
.page-header-content {
|
text-align: center;
|
}
|
.page-header-title {
|
height: 2rem;
|
line-height: 2rem;
|
font-weight: bold;
|
}
|
.page-header-subtitle {
|
height: 1.4rem;
|
line-height: 1.4rem;
|
font-size: 1rem;
|
font-weight: 700;
|
color: #0f0;
|
}
|
.page-header-time {
|
font-size: 0.9rem;
|
height: 2.5rem;
|
line-height: 2.5rem;
|
color: rgba(255,255,255,.7);
|
}
|
.nav>ul {
|
font-size: 0.8rem;
|
}
|
.nav>ul>li {
|
display: inline-block;
|
margin-left: 0.4rem;
|
width: 6rem;
|
text-align: center;
|
height: 2rem;
|
position: relative;
|
line-height: 2rem;
|
margin-top: .25rem;
|
box-sizing: border-box;
|
border-radius: 0.25px;
|
}
|
.nav>ul>li>i {
|
margin-right: 0.25rem;
|
}
|
.nav>ul>li>a {
|
color: #FFFFFF;
|
}
|
.nav>ul>li:hover {
|
box-shadow: -10px 0px 15px #034c6a inset,
|
0px -10px 15px #034c6a inset,
|
10px 0px 15px #034c6a inset,
|
0px 10px 15px #034c6a inset;
|
}
|
.nav_active {
|
border-bottom: 0.2rem solid #4b8df8;
|
box-shadow: -10px 0px 15px #034c6a inset,
|
0px -10px 15px #034c6a inset,
|
10px 0px 15px #034c6a inset,
|
0px 10px 15px #034c6a inset;
|
}
|
</style>
|
