<template>
<div id="IndexTop">
<el-container style="height:100%">
<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;"
@click="ZhuXIao()"
/>
<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"> -->
<span id="UserName">
{{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 style="height: calc(100% - 40px);">
<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" v-has="'m1'">
<template slot="title">
<i class="el-icon-location"></i>
<span>站点状况预览图</span>
</template>
<el-menu-item index="2-1" route="/site/previewOfSiteStatus" v-has="'m1'">站点状况预览图</el-menu-item>
</el-submenu>
<el-menu-item index="3" route="/newFiber/NewFiberSearch" v-has="'m2'">
<i class="el-icon-menu"></i>
<span slot="title">新烽查询</span>
</el-menu-item>
<el-submenu index="4" v-has="'m3'">
<template slot="title">
<i class="el-icon-location"></i>
<span>配置中心</span>
</template>
<el-menu-item index="4-1" route="/configure/AlarmConfiguration" v-has="'m3-1'">报警配置</el-menu-item>
<el-menu-item index="4-2" route="/configure/PushRules" v-has="'m3-2'">推送规则</el-menu-item>
<el-menu-item index="4-3" route="/configure/AlarmLog" v-has="'m3-3'">报警日志</el-menu-item>
<el-menu-item index="4-4" route="/configure/PatrolConfiguration" v-has="'m3-4'">巡检配置</el-menu-item>
</el-submenu>
<el-submenu index="5" v-has="'m4'">
<template slot="title">
<i class="el-icon-location"></i>
<span>消息管理</span>
</template>
<el-menu-item index="5-1" route="/MessageManagement/MessageQuery" v-has="'m4-1'">消息查询</el-menu-item>
<el-menu-item
index="5-2"
route="/MessageManagement/MessageStatistics"
v-has="'m4-2'"
>消息统计</el-menu-item>
</el-submenu>
<el-submenu index="6" v-has="'m5'">
<template slot="title">
<i class="el-icon-location"></i>
<span>数据分析</span>
</template>
<el-menu-item index="6-1" route="/DataAnalysis/dataScreening" v-has="'m5-1'">数据总览</el-menu-item>
<el-menu-item index="6-2" route="/DataAnalysis/StatisticalReport" v-has="'m5-2'">统计报表</el-menu-item>
</el-submenu>
<el-submenu index="7" v-has="'m6'">
<template slot="title">
<i class="el-icon-location"></i>
<span>工业物联网云平台</span>
</template>
<el-menu-item
index="7-1"
route="/NFCloudPlatform/VideoSurveillance"
v-has="'m6-1'"
>视频监控</el-menu-item>
<el-menu-item index="7-2" route="/NFCloudPlatform/RealTime" v-has="'m6-2'">实时监控</el-menu-item>
</el-submenu>
<el-submenu index="8" v-has="'m7'">
<template slot="title">
<i class="el-icon-location"></i>
<span>工程作业</span>
</template>
<el-menu-item index="8-1" route="/Engineering/Nowfault" v-has="'m7-1'">站点实时故障数据</el-menu-item>
<el-menu-item index="8-2" route="/Engineering/HistoricalFault" v-has="'m7-2'">站点历史故障数据</el-menu-item>
<el-menu-item index="8-3" route="/Engineering/MyHomework" v-has="'m7-3'">我的作业</el-menu-item>
</el-submenu>
<el-submenu index="9" v-has="'m8'">
<template slot="title">
<i class="el-icon-location"></i>
<span>LED显示屏管理</span>
</template>
<el-menu-item index="9-1" route="/LED/LEDConfig" v-has="'m8'">LED设备信息</el-menu-item>
</el-submenu>
<el-submenu index="10" v-has="'m9'">
<template slot="title">
<i class="el-icon-location"></i>
<span>系统管理</span>
</template>
<el-menu-item index="10-1" route="/sys/user" v-has="'m9-1'">用户管理</el-menu-item>
<el-menu-item index="10-2" route="/sys/org" v-has="'m9-2'">组织管理</el-menu-item>
<el-menu-item index="10-3" route="/sys/role" v-has="'m9-3'">角色管理</el-menu-item>
<el-menu-item index="10-4" route="/sys/menu" v-has="'m9-4'">菜单管理</el-menu-item>
</el-submenu>
<el-menu-item index="11" v-has="'m10'" route="/ConditionMonitoring/ConditionMonitoring">
<i class="el-icon-menu"></i>
<span slot="title">状态监控</span>
</el-menu-item>
</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";
import * as locasto 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);
// });
// }
ZhuXIao() {
this.$router.push({ path: "/Login" });
sessionStorage.clear();
}
},
mounted: function() {
//添加菜单
// this.LoadMenu();
// this.loadLoginName();
this.LoginName = locasto.getItem("USERName");
}
};
</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;
/* overflow: auto; */
}
#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%;
}
</style>
