<template>
|
<div id="app">
|
<div class="science-header">
|
<Row>
|
<i-col span="6">
|
<div class="blade-card" style="height: 40px;">
|
<div class="blade-card-mask" style="left:0; right: 40px;"></div>
|
<div class="blade-card-mask-after"></div>
|
<div class="blade-card-content">
|
<Tooltip content="菜单">
|
<div class="menu-btn" @click="menu = true">
|
<Icon type="md-menu" />
|
</div>
|
</Tooltip>
|
</div>
|
</div>
|
</i-col>
|
<i-col span="12">
|
<div style="text-align: center; line-height: 40px;font-size: 20px;font-weight: bold; color: #73D8FE">蓄电池智能管理系统</div>
|
</i-col>
|
<i-col span="6">
|
<div class="blade-card" style="height: 40px;">
|
<div class="blade-card-mask" style="left:40px; right: 0;"></div>
|
<div class="blade-card-mask-before"></div>
|
<div class="blade-card-content" style="text-align: right">
|
<div class="user-info">
|
<!-- <Dropdown>
|
<a href="javascript:void(0)">
|
<Avatar style="background-color: #87d068" icon="ios-person" />
|
<span class="user-name">hdw</span>
|
</a>
|
<DropdownMenu slot="list">
|
<DropdownItem>密码修改</DropdownItem>
|
<DropdownItem>退出系统</DropdownItem>
|
</DropdownMenu>
|
</Dropdown> -->
|
</div>
|
</div>
|
</div>
|
</i-col>
|
</Row>
|
<Row style="margin-top: 8px;">
|
<i-col offset="1" span="4">
|
<header-decorate-left></header-decorate-left>
|
</i-col>
|
<i-col offset="14" span="4" >
|
<header-decorate-right></header-decorate-right>
|
</i-col>
|
</Row>
|
</div>
|
<div class="science-content">
|
<Row>
|
<i-col span="24">
|
<Tabs type="card" v-model="activeName" @on-tab-remove="handlerTabRemove" name="mainTabs">
|
<TabPane label="首页" name="home" key="home" tab="mainTabs">
|
<div class="page-view">
|
<router-view></router-view>
|
</div>
|
</TabPane>
|
<h-tab-pane
|
v-for="tab in tabs"
|
:key="tab.name"
|
:label="tab.label"
|
:name="tab.name"
|
tab="mainTabs"></h-tab-pane>
|
</Tabs>
|
</i-col>
|
</Row>
|
</div>
|
<Drawer :closable="false" placement="left" v-model="menu" class="main-menu">
|
<Menu theme="dark" :active-name="activeName" width="auto" style="height:100vh" @on-select="handlerMenuSelect">
|
<MenuItem name="home">
|
<Icon type="md-home"/>
|
首页
|
</MenuItem>
|
<Submenu v-for="item in menus" :key="item.name" :name="item.name">
|
<template slot="title">
|
<Icon :type="item.icon" />
|
{{ item.label }}
|
</template>
|
<MenuItem
|
v-for="children in item.children"
|
:key="children.name" :name="children.name">{{ children.label }}</MenuItem>
|
</Submenu>
|
</Menu>
|
</Drawer>
|
</div>
|
</template>
|
<script>
|
import HeaderDecorateLeft from './components/HeaderDecorateLeft'
|
import HeaderDecorateRight from './components/HeaderDecorateRight'
|
import HTabPane from './components/HTabPane'
|
import {ajax} from './libs/common'
|
export default {
|
name: 'app',
|
components: {
|
HeaderDecorateLeft,
|
HeaderDecorateRight,
|
HTabPane
|
},
|
data() {
|
return {
|
menu: false,
|
activeName: 'home',
|
menus: [
|
{
|
label: '信息管理',
|
name: 'battInfoManage',
|
icon: 'ios-videocam',
|
children: [
|
{
|
label: '电池信息配置',
|
name: 'batt/info',
|
}
|
]
|
},
|
{
|
label: '监测数据',
|
name: 'monitorData',
|
icon: 'ios-videocam',
|
children: [
|
{
|
label: '实时-监测数据',
|
name: 'monitor/real'
|
},
|
{
|
label: '历史-测试数据',
|
name: 'monitor/history'
|
}
|
]
|
},
|
{
|
label: '告警管理',
|
name: 'battwarn',
|
icon: 'md-alert',
|
children: [
|
{
|
label: '电池告警实时查询',
|
name: 'warnmanage/cellreal'
|
},
|
{
|
label: '电池告警历史查询',
|
name: 'warnmanage/cellhistory'
|
},
|
{
|
label: '设备告警实时查询',
|
name: 'warnmanage/equipreal'
|
},
|
{
|
label: '设备告警历史查询',
|
name: 'warnmanage/equiphistory'
|
},{
|
label: '电池告警参数设置',
|
name: 'warnmanage/cellwarnset'
|
},{
|
label: '设备告警参数设置',
|
name: 'warnmanage/equipwarnset'
|
}
|
]
|
}
|
],
|
tabs: []
|
}
|
},
|
methods: {
|
handlerMenuSelect: function(name) {
|
if(name) {
|
this.activeName = name; // 设置激活页面的名称
|
this.menu = false; // 关闭抽屉
|
if(name == 'home') { // 页面为首页时操作
|
return;
|
}
|
var menuInfo = this.getMenuInfo(name); // 获取菜单的信息
|
if(!this.checkTabs(name)) { // 菜单不在选项卡中
|
this.tabs.push(menuInfo); // 将菜单添加到选择项卡中
|
}
|
}
|
},
|
getMenuInfo: function(name) {
|
var result = {};
|
for(var i=0; i<this.menus.length; i++) {
|
var menu = this.menus[i];
|
var childrens = menu.children;
|
for(var k=0;k<childrens.length; k++) {
|
var children = childrens[k];
|
if(children.name == name) {
|
result.open = menu.name;
|
result.label = children.label;
|
result.name = children.name;
|
}
|
}
|
}
|
return result;
|
},
|
checkTabs: function(name) {
|
var result = false;
|
for(var i=0; i<this.tabs.length; i++) {
|
var tab = this.tabs[i];
|
if(tab.name == name) { // 判断tab是否重复
|
result = true;
|
}
|
}
|
return result;
|
},
|
handlerTabRemove: function(name) {
|
for(var i=0; i<this.tabs.length; i++) {
|
var tab = this.tabs[i];
|
if(tab.name == name) {
|
this.tabs.splice(i, 1);
|
//tab.show = false; // 设置被关闭的tab不可见
|
break;
|
}
|
}
|
},
|
searchUsername: function() {
|
var self = this;
|
ajax({
|
url: 'User_infAction!searchUname',
|
data: null,
|
success: function(res) {
|
console.log(res);
|
}
|
});
|
},
|
},
|
mounted() {
|
//this.searchUsername();
|
},
|
}
|
</script>
|
<style scoped>
|
.menu-btn {
|
font-size: 20px;
|
line-height: 40px;
|
margin-left: 16px;
|
color: #CCCCCC;
|
}
|
.menu-btn:hover {
|
color: #FFFFFF;
|
cursor: pointer;
|
}
|
.science-content {
|
margin-top: 16px;
|
}
|
.page-view {
|
height: calc(100vh - 115px);
|
overflow-y: auto;
|
}
|
.user-info {
|
display: inline-block;
|
margin-top: 4px;
|
margin-right: 16px;
|
text-align: center;
|
}
|
.user-name {
|
color: #FFFFFF;
|
margin-left: 8px;
|
}
|
</style>
|
