<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" ref="PathView" ></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() { // 给予gis的方法调用demo A // this.$refs.PathView; this.$refs["PathView"].REFSFunctionToGis(this.flag); // 给予gis的方法调用demo E 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>