<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
class="el-menu-vertical-demo"
@select="MenuClick"
:router="true"
text-color="white"
active-text-color="#e8d523"
unique-opened
>
<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="13" v-has="'m11'">
<template slot="title">
<i class="el-icon-location"></i>
<span>配置管理</span>
</template>
<el-menu-item
index="13-1"
route="/ConfigManager/project"
v-has="'m11-1'"
>项目设置</el-menu-item
>
<el-menu-item
index="13-2"
route="/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="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="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: "",
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;
}
.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:focus,
.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(--elmenuitem) !important;
}
/* 左侧菜单 B */
.el-main {
/* background-color: #e9eef3; */
color: #333;
text-align: center;
padding: 30px !important;
/* line-height: 160px; */
}
.el-container {
width: 100%;
}
</style>
