<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-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="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" :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() { 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)"); 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"); 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", "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"); this.flag = true; } }, ZhuXIao() { this.$router.push({ path: "/Login" }); sessionStorage.clear(); } }, mounted: function() { this.LoginName = locasto.getItem("USERName"); } }; </script> <style> .form-cascader .el-cascader-node:not(.is-disabled):focus, .form-cascader .el-cascader-node:not(.is-disabled):hover { background-color: var(--selecthover) !important; } .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path { color: var(--selected); } .el-select-dropdown__list { background-color: var(--selectlist); } .el-dialog__header, .el-dialog__body, .el-dialog__footer { background-color: var(--tablethead); } .el-form-item__label { color: var(--digtext); } .el-pagination__jump { color: var(--white); } .el-pagination__total { color: var(--white); } .el-icon-arrow-right:before { color: var(--lighgreen); } .el-icon-arrow-left:before { color: var(--lighgreen); } .el-pagination .el-pager li.active { background-color: hsl(210, 100%, 63%) !important; cursor: default; } .el-tabs__nav-scroll { background: var(--tablethead) !important; } #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; } .el-table thead { background: var(--tablethead); } .el-table__body { background: var(--tablebody); } .el-input__inner { background-color: transparent; color: var(--white) !important; border: 1px solid rgb(0, 111, 255); } .el-input.is-disabled .el-input__inner { background-color: transparent; border: 1px solid rgb(0, 111, 255); color: var(--white) !important; } .el-checkbox { color: var(--white); } .el-input__inner::placeholder { color: var(--white); } .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: 260px; 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__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%; } .el-message-box__title { color: var(--diatitle); } .el-message-box__content { color: white !important; } .el-date-editor .el-range-separator { color: var(--white) !important; } .el-range-input { background-color: rgba(0, 0, 0, 0) !important; } .el-picker-panel { background: #182031 !important; } .el-picker-panel [slot="sidebar"], .el-picker-panel__sidebar { background: #182031 !important; } .el-picker-panel__footer { background: #182031 !important; } .el-picker-panel__shortcut { color: #c2ceea !important; } .el-date-editor .el-range-input { color: var(--white) !important; } .el-date-range-picker__header .el-picker-panel__icon-btn { color: #fff !important; } .el-time-panel { background-color: rgb(24, 32, 49) !important; } .el-select-dropdown, .el-cascader-menu__list { background-color: var(--selectlist) !important; border: 1px solid var(--selecthover) !important; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover, .el-cascader-node:hover { background-color: var(--selecthover); } .el-select-dropdown__item, .el-cascader-menu__list { color: var(--white); } .el-select-dropdown__item.selected { color: var(--selected); } /* tabs A*/ .el-tabs { height: 100% !important; box-sizing: border-box !important; padding: 5px !important; } .el-tabs__content { height: calc(100% - 55px) !important; } .el-tabs__item { color: white !important; } .el-tabs__nav-wrap::after { content: ""; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 100% !important; height: 2px !important; background-color: #e4e7ed00 !important; z-index: 1 !important; } .el-tabs__active-bar { background-color: var(--yellow) !important; } .el-tabs__item.is-active { color: var(--yellow) !important; } .el-tab-pane { width: 100% !important; height: 100% !important; } .el-tabs__content { height: calc(100% - 55px) !important; } .el-tabs { width: 100% !important; height: 100% !important; } .el-tabs__item { color: var(--white) !important; } .el-table { background: rgba(5, 12, 30, 0) !important; } .el-table tr { background: rgba(255, 255, 255, 0.05) !important; } .el-table th { background: rgba(255, 255, 255, 0) !important; } .el-table td, .el-table th.is-leaf { border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; } .el-table--border::after, .el-table--group::after, .el-table::before { background-color: black !important; } .el-table th .cell { color: var(--white) !important; text-align: center !important; } .el-table td .cell { color: var(--white) !important; text-align: center !important; } .el-table__body-wrapper { height: calc(100% - 49px) !important; overflow-y: auto !important; background: rgba(27, 27, 28, 0) !important; } .el-table--border::after, .el-table--group::after, .el-table::before { background-color: rgba(0, 0, 0, 0) !important; } .el-table--striped .el-table__body tr.el-table__row--striped td { background: rgba(255, 255, 255, 0.05) !important; } .el-table--enable-row-hover .el-table__body tr:hover > td { background: var(--tablehover) !important; } /* 分页 A*/ .el-pagination button:disabled { background-color: #fdfdfd12 !important; color: #999 !important; } .el-pagination .btn-next, .el-pagination .btn-prev { background-color: #fdfdfd12 !important; color: white !important; } .el-pager li { background-color: #fdfdfd12 !important; color: var(--white) !important; } .el-pager li.btn-quicknext, .el-pager li.btn-quickprev { line-height: 28px !important; color: #c1c5cc !important; } .el-dialog { background: #000000 !important; border: 1px solid rgb(102, 177, 255); } .el-dialog__title { color: var(--diatitle) !important; } .el-message-box { background: #000000 !important; border: 1px solid rgb(102, 177, 255); } .el-message-box__title { color: aqua !important; } .el-message-box__content { color: white !important; } /* 多选 A*/ .el-checkbox__input.is-disabled + span.el-checkbox__label { color: #878788 !important; cursor: not-allowed !important; } .el-textarea__inner { background-color: var(--tablethead); color: white !important; border: 1px solid rgb(4, 51, 52) !important; } /* textarea 样式B */ /* 新烽查询系统单独样式 A */ #NFSNo2 .el-table__header tr, #NFSNo2 .el-table__header th { padding: 0 !important; height: 40px !important; } #NFSNo2 .el-table__body tr, #NFSNo2 .el-table__body td { padding: 0 !important; height: 40px !important; } #NFSNo2 .el-table__body-wrapper { height: calc(100% - 69px) !important; overflow-y: auto !important; background: rgba(27, 27, 28, 0) !important; } /* 新烽查询系统单独样式 B */ /* 删除弹窗 */ .el-message-box { background: #000000 !important; border: 1px solid rgb(102, 177, 255); } /* 菜单 */ .el-menu { border-right: 0px solid #e6e6e6 !important; } .el-tree { background: rgba(225, 225, 225, 0); } .el-tree-node:focus > .el-tree-node__content { background-color: #042d3c; } </style>