<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" /> <span id="UserName"> {{ LoginName }} </span> <div class="ChangeBGC" @click="ChangeBGC()">换肤</div> </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-menu-item index="/ConfigManager/factor" v-has="'m11-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="/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="12" v-has="'m12'"> <template slot="title"> <i class="el-icon-location"></i> <span>服务监控</span> </template> <el-menu-item index="/ServiceWatch/serverManage" v-has="'m12-1'">服务器管理</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> </el-aside> <el-main style="height: 100%"> <router-view id="ContentView" :userId="userId" :flag="flag" ></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() { console.log(9999); 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( "--elmentitemtwo", "-webkit-linear-gradient(0deg, #5779b8, #a7c0ea 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)"); root.style.setProperty("--bluetowhite", "rgb(255, 255, 255)"); root.style.setProperty("--yellow", "rgb(0, 120, 254)"); root.style.setProperty("--lighgreen", "rgb(0, 0, 0"); root.style.setProperty("--digtext", "rgb(0, 0, 0)"); root.style.setProperty("--diatitle", "rgb(0, 119, 254)"); root.style.setProperty("--selected", "#333333"); root.style.setProperty("--selecthover", "#dbecff"); root.style.setProperty("--selectlist", "#f4f8ff"); root.style.setProperty("--shouselect", "#f4f8ff"); root.style.setProperty("--elmentbgc", "rgb(193, 213, 248)"); root.style.setProperty("--diagiobgc", "rgb(206, 223, 255)"); root.style.setProperty("--innerbgc", "rgb(255, 255, 255)"); root.style.setProperty("--xfcxcolor", "#263f66"); root.style.setProperty("--xfcxborder", "#bacdee"); root.style.setProperty("--xfcxmegbgc", "#cee0ff"); root.style.setProperty("--xfcxbgc", "#c0d5f8"); root.style.setProperty("--elinputdisabled", "transparent"); root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)"); 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( "--elmentitemtwo", "-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", "rgb(255, 255, 255)"); root.style.setProperty("--bluetowhite", "rgb(0, 119, 254)"); root.style.setProperty("--yellow", "rgb(255, 255, 0)"); root.style.setProperty("--lighgreen", "rgb(127, 255, 0)"); root.style.setProperty("--digtext", "rgb(96, 98, 102)"); root.style.setProperty("--diatitle", "rgb(0, 255, 255)"); root.style.setProperty("--selected", "rgb(239, 226, 1)"); root.style.setProperty("--selecthover", "rgb(4, 51, 52)"); root.style.setProperty("--selectlist", "transparent"); root.style.setProperty("--shouselect", "rgb(60, 57, 57)"); root.style.setProperty("--elmentbgc", "rgb(58, 58, 60)"); root.style.setProperty("--diagiobgc", "rgb(0, 0, 0)"); root.style.setProperty("--innerbgc", "transparent"); root.style.setProperty("--xfcxcolor", "#fff"); root.style.setProperty("--xfcxborder", "#213b55"); root.style.setProperty("--xfcxmegbgc", "#152535"); root.style.setProperty("--xfcxbgc", "#050c16"); root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)"); root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)"); this.flag = true; } }, ZhuXIao() { this.$router.push({ path: "/Login" }); sessionStorage.clear(); } }, mounted: function() { //添加菜单 // this.LoadMenu(); // this.loadLoginName(); this.LoginName = locasto.getItem("USERName"); } }; </script> <style lang="scss"> #IndexTop { width: 100%; height: 100%; position: relative; background: url("../../static/img/BGIMG.jpg") 100% 100%; } .indexbgc { background: url("../../static/img/bg_img.png") 100% 100% !important; } </style>