<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"
/>
<!-- <el-dropdown id="UserName"> -->
<!-- <span class="el-dropdown-link"> -->
<div class="ChangeBGC" @click="ChangeBGC()">换色</div>
<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-submenu>
<el-submenu index="13" v-has="'m3'">
<template slot="title">
<i class="el-icon-location"></i>
<span>配置管理</span>
</template>
<el-menu-item
index="13-1"
route="/ConfigManager/project"
v-has="'m3-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="12" v-has="'m4'">
<template slot="title">
<i class="el-icon-location"></i>
<span>实时数据监测</span>
</template>
<el-menu-item
index="12-1"
route="/DataWatch/summary"
v-has="'m4-1'"
>数据总览
</el-menu-item>
<el-menu-item
index="12-2"
route="/DataWatch/realtime"
v-has="'m4-2'"
>实时数据
</el-menu-item>
<el-menu-item
index="12-3"
route="/DataWatch/history"
v-has="'m4-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="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: "",
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) {
// console.log("true");
root.style.setProperty("--color", "rgb(253, 44, 79)");
root.style.setProperty("--tablehover", "rgb(255,255,255)");
root.style.setProperty("--white", "rgb(0,0,0)");
this.flag = false;
} else {
// console.log("false");
root.style.setProperty("--color", "rgb(255, 255, 255)");
root.style.setProperty("--tablehover", "rgb(4, 51, 52)");
root.style.setProperty("--white", "rgb(255,255,255)");
this.flag = true;
}
},
// 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;
/* user-select: none; */
background: url("../../static/img/BGIMG.png") 100% 100%;
}
.indexbgc {
background: url("../../static/img/white.png") 100% 100% !important;
}
.ChangeBGC {
position: absolute;
right: 230px;
z-index: 9999;
background-color: #000;
color: var(--color);
cursor: pointer;
}
#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;
padding: 30px !important;
/* line-height: 160px; */
}
.el-container {
width: 100%;
}
</style>
