<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>
{{ LoginName }}
<i class="el-icon-arrow-down el-icon--right" style="color:#fff"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>修改密码</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown> -->
<el-dropdown class="dropdown" trigger="click" @command="handleCommand">
<div class="user-account">
<span class="txt">{{LoginName}}</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(item, index) in dropdownList"
:key="index"
:command="item.command"
>
{{item.key}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<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-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-menu-item index="/ConfigManager/RtuConfig" v-has="'m11-5'"
>RTU配置</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>
<page-dialog
:title="dialogInfo.title[dialogInfo.type]"
:visible.sync="dialogInfo.visible"
:width="dialogInfo.width"
:bt-loading="dialogInfo.btLoading"
:bt-list="dialogInfo.btList"
@handleClick="handleClick"
>
<page-form
:ref-obj.sync="formInfo.ref"
:data="formInfo.data"
:rules="formInfo.rules"
:field-list="formInfo.fieldList"
:label-width="formInfo.labelWidth"
@handleClick="handleClick"
/>
</page-dialog>
</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,
dropdownList:[
{key:'修改密码',command:'updatePw'}
],
//弹窗相关
dialogInfo:{
title: {
updatePw: '修改密码'
},
visible: false,
btLoading: false,
width: "500px",
type: '',
btList: [
{label:'关闭',type:'',icon:'',event:'close',show:true},
{label:'保存',type:'primary',icon:'',event:'save',show:true,loading: true}
]
},
//表单相关
formInfo:{
ref: null,
data: {
userNo:'', //账户
password:'', //原始密码
newpassword:'', //新密码
},
fieldList: [
{label:'账户',value:'userNo',disabled:true,type:'input',required:true,className:'el-form-block'},
{label:'原密码',value:'password',type:'password',required:true,className:'el-form-block'},
{label:'新密码',value:'newpassword',type:'password',required:true,className:'el-form-block'},
],
rules: {},
labelWidth: '100px'
}
};
},
watch: {
"dialogInfo.visible"(val) {
let formInfo = this.formInfo;
if (!val) {
if (formInfo.ref) {
formInfo.ref.resetFields();
}
this.resetForm();
this.dialogInfo.btLoading = false;
}
}
},
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();
},
// 初始化验证
initRules(){
let formInfo = this.formInfo;
formInfo.rules = this.$initRules(formInfo.fieldList);
},
handleCommand(command){
const dialogInfo = this.dialogInfo
const formInfo = this.formInfo
switch(command){
//修改密码
case 'updatePw':
dialogInfo.type = command;
dialogInfo.visible = true
this.formInfo.data.userNo = localStorage.getItem("USERNO");
break;
}
},
//点击事件
handleClick(event, data) {
const formInfo = this.formInfo;
const dialogInfo = this.dialogInfo;
switch(event) {
//保存
case 'save':
formInfo.ref.validate(valid => {
if(valid){
let api; let params = formInfo.data;
dialogInfo.btLoading = true;
this.$http.post(this.nozzle.updateUserPwd,{data:params}).then(res =>{
dialogInfo.btLoading = false;
if(res.data.code === 1) {
dialogInfo.visible = false;
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true
});
}).catch(e =>{
dialogInfo.btLoading = false;
console.log(e);
})
}
})
break
//关闭
case "close":
dialogInfo.visible = false;
break;
}
},
//重置表单
resetForm() {
this.formInfo.data = {
userNo:'', //账户
password:'', //原始密码
newpassword:'', //新密码
};
}
},
mounted: function() {
//添加菜单
// this.LoadMenu();
// this.loadLoginName();
this.initRules();
this.LoginName = locasto.getItem("USERName");
}
};
</script>
<style lang="scss" scoped>
#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-icon-arrow-down {
font-size: 12px;
}
/deep/.el-icon-arrow-down el-icon--right {
color: #fff !important;
}
.dropdown{
float: right;
@include sc(16px,#fff);
cursor: pointer;
}
</style>
