<template> <div id="IndexTop" :class="{ indexbgc: !flag }"> <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" /> <div class="ChangeBGC" @click="ChangeBGC()">换色</div> <span id="UserName"> {{ LoginName }} </span> </el-header> <el-container style="height: calc(100% - 40px)"> <el-aside :style="'width:' + MenuWidth + 'px'"> <el-menu :default-active="$route.path" unique-opened class="el-menu-vertical-demo" @select="MenuClick" :router="true" text-color="white" active-text-color="#e8d523" > <el-menu-item index="/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="/site/previewOfSiteStatus" v-has="'m1-1'" >站点状况预览图</el-menu-item > </el-submenu> <el-menu-item index="/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="/configure/AlarmConfiguration" v-has="'m3-1'" >报警配置</el-menu-item > <el-menu-item index="/configure/PushRules" v-has="'m3-2'" >推送规则</el-menu-item > <el-menu-item index="/configure/AlarmLog" v-has="'m3-3'" >报警日志</el-menu-item > <el-menu-item index="/configure/PatrolConfiguration" v-has="'m3-4'" >巡检配置</el-menu-item > <el-menu-item index="/configure/RtuConfig" v-has="'m3-4'" >RTU配置</el-menu-item > </el-submenu> <el-submenu index="13" v-has="'m11'"> <template slot="title"> <i class="el-icon-location"></i> <span>配置管理</span> </template> <el-menu-item index="/ConfigManager/project" v-has="'m11-1'" >项目设置</el-menu-item > <el-menu-item index="/ConfigManager/SiteManagement" v-has="'m11-2'" >站点管理</el-menu-item > <el-menu-item index="/ConfigManager/device" v-has="'m11-3'" >设备管理</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="/MessageManagement/MessageQuery" v-has="'m4-1'" >消息查询</el-menu-item > <el-menu-item index="/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="/DataAnalysis/dataScreening" v-has="'m5-1'" >数据总览</el-menu-item > <el-menu-item index="/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="/Engineering/Nowfault" v-has="'m7-1'" >站点实时故障数据</el-menu-item > <el-menu-item index="/Engineering/HistoricalFault" v-has="'m7-2'" >站点历史故障数据</el-menu-item > <el-menu-item index="/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="/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="/sys/user" v-has="'m9-1'" >用户管理</el-menu-item > <el-menu-item index="/sys/org" v-has="'m9-2'" >组织管理</el-menu-item > <el-menu-item index="/sys/role" v-has="'m9-3'" >角色管理</el-menu-item > <el-menu-item index="/sys/menu" v-has="'m9-4'" >菜单管理</el-menu-item > </el-submenu> <el-menu-item index="/ConditionMonitoring/ConditionMonitoring" v-has="'m10'" > <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: "", flag: true }; }, methods: { MenuSHOW: function() { if (this.MenuWidth == 200) { this.MenuWidth = 0; } else { this.MenuWidth = 200; } }, MenuClick(key, keyPath) { // console.log(key, keyPath); }, ChangeBGC() { let root = document.querySelector(":root"); if (this.flag) { root.style.setProperty("--color", "rgb(253, 44, 79)"); root.style.setProperty("--tablehover", "rgb(255,255,255)"); root.style.setProperty("--white", "rgb(0,0,0)"); root.style.setProperty("--tablethead", "rgb(206, 223, 255)"); root.style.setProperty("--tablebody", "rgb(193, 213, 248)"); // root.style.setProperty("--elhead", "rgb(6, 92, 255)"); // root.style.setProperty("--elaside", "rgb(187, 209, 246)"); // root.style.setProperty("--black", "rgb(255, 255, 255)"); // root.style.setProperty("--elmenuitem", "rgb(255, 255, 255)"); // root.style.setProperty( // "--lineargradient", // "-webkit-linear-gradient(0deg, #065cfd, #bbd1f6 80%)" // ); // root.style.setProperty("--elicon", "rgb(255,255,255)"); // root.style.setProperty("--preSiteTitle", "rgb(207, 223, 255)"); // root.style.setProperty("--preSiteCentent", "rgb(193, 213, 248)"); // root.style.setProperty("--pretextbg", "rgb(6, 92, 255)"); // root.style.setProperty("--preTopDatatxt", "rgb(39, 71, 217)"); // root.style.setProperty("--eldatebefore", "rgb(0, 119, 255)"); this.flag = false; } else { root.style.setProperty("--color", "rgb(255, 255, 255)"); root.style.setProperty("--tablehover", "rgb(4, 51, 52)"); root.style.setProperty("--white", "rgb(255,255,255)"); root.style.setProperty("--tablethead", "transparent"); root.style.setProperty("--tablebody", "transparent"); root.style.setProperty("--elhead", "rgb(5, 4, 9)"); root.style.setProperty("--elaside", "rgb(5, 4, 9)"); root.style.setProperty("--black", "rgb(0, 0, 0)"); root.style.setProperty("--elmenuitem", "rgb(58, 58, 60)"); root.style.setProperty( "--lineargradient", "-webkit-linear-gradient(transparent)" ); root.style.setProperty("--elicon", ""); root.style.setProperty("--preSiteTitle", "rgba(25, 26, 28)"); root.style.setProperty("--preSiteCentent", "transparent"); root.style.setProperty("--pretextbg", "transparent"); root.style.setProperty("--preTopDatatxt", "rgb(255, 217, 0)"); root.style.setProperty("--eldatebefore", "transparent"); this.flag = true; } }, ZhuXIao() { this.$router.push({ path: "/Login" }); sessionStorage.clear(); } }, mounted: function() { //添加菜单 // this.LoadMenu(); // this.loadLoginName(); this.LoginName = locasto.getItem("USERName"); } }; </script> <style> .el-tabs__nav-scroll { background: var(--tablethead) !important; } #IndexTop { width: 100%; height: 100%; position: relative; /* user-select: none; */ background: url("../../static/img/BGIMG.jpg") 100% 100%; } .indexbgc { background: url("../../static/img/bg_img.png") 100% 100% !important; } .el-table thead { background: var(--tablethead); } .el-table__body { background: var(--tablebody); } .el-input__inner { color: var(--white) !important; } .el-input__inner::placeholder { color: var(--white); } .el-pager li { color: var(--white) !important; } .el-icon-date:before { color: var(--eldatebefore); } .el-aside { background-color: var(--elaside) !important; color: var(--white) !important; text-align: center; } .el-icon-menu:before, .el-icon-location:before { color: var(--elicon); } .ChangeBGC { position: absolute; right: 230px; z-index: 9999; background-color: var(--elhead); color: #fff; cursor: pointer; } #ContentView { width: 100%; height: 100%; } /* 顶部 A */ .el-header { background-color: var(--elhead); 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-menu-item { background-color: var(--elmenuitem) !important; background-image: var(--lineargradient) !important; border-bottom: 2px solid var(--black); /* color: var(--white) !important; */ text-align: left; background-color: rgb(58, 58, 60) !important; } .el-menu-item .el-menu-item { color: var(--white) !important; } .el-menu-vertical-demo { background-color: var(--elmenuitem) !important; background-image: var(--lineargradient) !important; color: var(--white) !important; } .el-submenu.is-active { /* border-bottom: 2px solid var(--black); */ /* color: rgb(255, 213, 0) !important; */ } .el-submenu__title { border-bottom: 2px solid var(--black); color: var(--white); text-align: left; } .el-menu-item:hover, .el-submenu__title:hover { outline: 0; background-color: #6d6d6d !important; } .el-submenu.is-active .el-submenu__title { border-bottom-color: var(--black) !important; } /* 左侧菜单 B */ .el-main { /* background-color: #e9eef3; */ color: #333; text-align: center; padding: 30px !important; /* line-height: 160px; */ } .el-container { width: 100%; } </style>