<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 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-1'"> <template slot="title"> <i class="el-icon-location"></i> <span>站点状况预览图</span> </template> <el-menu-item index="2-1" route="/site/previewOfSiteStatus" v-has="'m1-1'">站点状况预览图</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-menu-item index="4-5" route="/configure/RtuConfig" v-has="'m3-4'">RTU配置</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>