<template>
<div id="IndexTop">
<el-container>
<el-header height="40px">
<img
src="../../static/img/indexTop1.png"
id="IndexTop1"
@click="MenuSHOW()"
style="cursor: pointer;"
/>
<img src="../../static/img/logo.png" alt id="IndexLogo" />
<span id="projectName">工程作业及监控系统</span>
<img
src="../../static/img/indexTop5.png"
title="注销"
id="IndexLetout"
style="cursor: pointer;"
/>
<img
src="../../static/img/indexTop4.png"
title="全屏"
id="IndexQuanpin"
style="cursor: pointer;"
/>
<img
src="../../static/img/indexTop3.png"
title="消息"
id="IndexMessage"
style="cursor: pointer;"
/>
<el-dropdown id="UserName">
<span class="el-dropdown-link">
{{LoginName}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>退出登陆</el-dropdown-item>
<el-dropdown-item>返回首页</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-container>
<el-aside :style="'width:' + MenuWidth + 'px'">
<el-menu
default-active="2-1"
class="el-menu-vertical-demo"
@select="MenuClick"
background-color="rgb(58, 58, 60)"
text-color="#fff"
active-text-color="rgb(255,213,0)"
:router="true"
>
<el-menu-item index="1" route="/overview" v-show="false">
<i class="el-icon-menu"></i>
<span slot="title">概 览</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>站点状况预览图</span>
</template>
<el-menu-item index="2-1" route="/site/previewOfSiteStatus">站点状况预览图</el-menu-item>
</el-submenu>
<el-menu-item index="3" route="/newFiber/NewFiberSearch">
<i class="el-icon-menu"></i>
<span slot="title">新烽查询</span>
</el-menu-item>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-location"></i>
<span>配置中心</span>
</template>
<el-menu-item index="4-1" route="/configure/AlarmConfiguration">报警配置</el-menu-item>
<el-menu-item index="4-2" route="/configure/PushRules">推送规则</el-menu-item>
<el-menu-item index="4-3" route="/configure/AlarmLog">报警日志</el-menu-item>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-location"></i>
<span>消息管理</span>
</template>
<el-menu-item index="5-1" route="/MessageManagement/MessageQuery">消息查询</el-menu-item>
<el-menu-item index="5-2" route="/MessageManagement/MessageStatistics">消息统计</el-menu-item>
</el-submenu>
<el-submenu index="6">
<template slot="title">
<i class="el-icon-location"></i>
<span>数据分析</span>
</template>
<el-menu-item index="6-1" route="/DataAnalysis/dataScreening">数据总览</el-menu-item>
<el-menu-item index="6-2" route="/DataAnalysis/StatisticalReport">统计报表</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main style="height:100%">
<router-view id="ContentView" :userId="userId"></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import { message } from "./../util/item";
export default {
name: "IndexTop",
data: function() {
return {
MenuWidth: 200,
LoginName: "系统管理员", //登录用户名称
userId: ""
};
},
methods: {
MenuSHOW: function() {
if (this.MenuWidth == 200) {
this.MenuWidth = 0;
} else {
this.MenuWidth = 200;
}
},
MenuClick(key, keyPath) {
console.log(key, keyPath);
}
// TwoMenuClick: function(index, event) {
// // 给index为1的加字体颜色,其他的不加
// //点击添加字体颜色，其他的删除class名称
// this.dynamic = index;
// // 获取点击的dom结构
// var thisDom = event.currentTarget;
// console.log(thisDom);
// // 获取dom结构里储存的路径
// // console.log(thisDom.children[0].value);
// var router = this.$router; //赋值使用
// router.push({ path: thisDom.children[0].value });
// this.userId = this.LoginId;
// },
// OneMenuClick: function(ID, Blone) {
// for (var i = 0; i < this.OneMenus.length; i++) {
// if (this.OneMenus[i].menuId == ID) {
// this.Manus = this.OneMenus[i].list;
// console.log(this.Manus);
// this.loadOneMenu();
// if (!Blone) {
// this.Oshow = !this.Oshow;
// }
// this.OneSel = index;
// }
// }
// },
// loadOneMenu: function() {
// var router = this.$router; //赋值使用
// router.push({ path: this.Manus[0].url });
// this.dynamic = 0;
// },
// MenuListData: function() {},
// mouseLeave: function() {
// this.Oshow = false;
// },
// GoOneMenu() {
// this.$router.push("/OneMenu");
// },
// TuiChu() {
// this.$http
// .get(this.nozzle.logout, {})
// .then(response => {
// if (response.data.code === 200) {
// }
// })
// .catch(response => {
// message(response);
// });
// this.$router.push("/Login");
// },
// 获取权限菜单
// LoadMenu() {
// this.$http
// .get(this.nozzle.sysMenuNav, {})
// .then(response => {
// if (response.data.code === 200) {
// this.OneMenus = response.data.data;
// // 获取从一级菜单页传过来的菜单ID
// this.OneMenuClick(this.$route.query.menuId, true);
// }
// })
// .catch(response => {
// message(response);
// });
// },
// 获取登录信息
// loadLoginName() {
// this.$http
// .get(this.nozzle.sysUserInfo)
// .then(response => {
// if (response.data.code === 200) {
// this.LoginName = response.data.data.username;
// this.LoginId = response.data.data.userId;
// } else {
// message(response);
// }
// })
// .catch(response => {
// message(response);
// });
// }
},
mounted: function() {
//添加菜单
// this.LoadMenu();
// this.loadLoginName();
}
};
</script>
<style >
#IndexTop {
width: 100%;
height: 100%;
position: relative;
-o-user-select: none;
-moz-user-select: none; /*火狐 firefox*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10+*/
-khtml-user-select: none; /*早期的浏览器*/
user-select: none;
}
#ContentView {
width: 100%;
height: 100%;
}
/* 顶部 A */
.el-header {
background-color: rgb(5, 4, 9);
color: #fff;
text-align: center;
line-height: 40px;
padding: 0;
}
#IndexTop1 {
margin: 14px;
float: left;
}
#IndexLogo {
float: left;
}
#projectName {
float: left;
padding: 0 20px;
border-left: 1px solid #ccc;
height: 24px;
line-height: 24px;
margin-top: 8px;
margin-left: 10px;
letter-spacing: 4px;
font-weight: 600;
}
#UserName {
float: right;
margin-right: 10px;
}
.el-dropdown-link {
cursor: pointer;
color: #fff;
}
.el-icon-arrow-down {
font-size: 12px;
}
#IndexMessage,
#IndexQuanpin,
#IndexLetout {
float: right;
margin: 12px;
}
/* 顶部 B */
/* 左侧菜单 A */
.el-aside {
background-color: rgb(5, 4, 9);
color: #fff;
text-align: center;
}
/* .el-menu {
border-right: 0px solid #e6e6e6 !important;
} */
.el-menu-item {
border-bottom: 2px solid #000;
text-align: left;
}
.el-submenu.is-active .el-submenu__title {
border-bottom: 2px solid #000;
}
.el-submenu__title {
border-bottom: 2px solid #000;
text-align: left;
}
.el-menu-item:focus,
.el-menu-item:hover,
.el-submenu__title:hover {
outline: 0;
background-color: #6d6d6d !important;
}
/* 左侧菜单 B */
.el-main {
/* background-color: #e9eef3; */
color: #333;
text-align: center;
/* line-height: 160px; */
}
.el-container {
width: 100%;
height: 100%;
}
</style>
