|
|
@@ -0,0 +1,353 @@
|
|
|
+<template>
|
|
|
+ <div class="header-menu">
|
|
|
+ <ul class="header-menu-list">
|
|
|
+ <li class="header-menu-item" v-for="(menu, index) of currMenu" :key="menu" @click="click(index, menu)"
|
|
|
+ :class="{ active: activeIndex == index }">
|
|
|
+ {{ menu.text }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import $ from "jquery";
|
|
|
+ import {
|
|
|
+ getCookie
|
|
|
+ } from "@/utills/auth";
|
|
|
+ import tools from "../../tools/encryption.js";
|
|
|
+ import {
|
|
|
+ logout
|
|
|
+ } from "@/api/common.js";
|
|
|
+ import {
|
|
|
+ encrypt,
|
|
|
+ decrypt
|
|
|
+ } from "@/utills/jsencrypt.js";
|
|
|
+ import SvgIcon from "@/components/coms/icon/svg-icon.vue";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ themeName: false,
|
|
|
+ menus: [{
|
|
|
+ id: "home",
|
|
|
+ text: "首页",
|
|
|
+ path: "/home",
|
|
|
+ isActive: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "stateMonitor",
|
|
|
+ text: "监视中心",
|
|
|
+ path: "/stateMonitor",
|
|
|
+ isActive: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "integratedAlarm",
|
|
|
+ text: "综合报警",
|
|
|
+ path: "/integratedAlarm",
|
|
|
+ isActive: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "economicsOperation",
|
|
|
+ text: "经济运行",
|
|
|
+ path: "/economicsOperation",
|
|
|
+ isActive: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "health",
|
|
|
+ text: "智慧检修",
|
|
|
+ // path: '/sandtable',
|
|
|
+ path: "/health",
|
|
|
+ isActive: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "powerGenerating",
|
|
|
+ text: "发电能力分析",
|
|
|
+ // path: '/sandtable',
|
|
|
+ path: "/powerGenerating",
|
|
|
+ isActive: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "report",
|
|
|
+ text: "智能报表",
|
|
|
+ path: "/nxreport",
|
|
|
+ isActive: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ activeIndex: 0,
|
|
|
+ // menusDropdown: [
|
|
|
+ // {
|
|
|
+ // text: "子菜单1",
|
|
|
+ // code: "submenu1",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // text: "子菜单2",
|
|
|
+ // code: "submenu2",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // text: "子菜单3",
|
|
|
+ // code: "submenu3",
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // dropdown: false,
|
|
|
+ firsttime: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ SvgIcon
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // let that = this;
|
|
|
+ // $(document).keydown((event) => {
|
|
|
+ // if (event.keyCode == 192) {
|
|
|
+ // // c
|
|
|
+ // // let firstDate = new Date();
|
|
|
+ // // if (that.firsttime == 0) {
|
|
|
+ // // that.firsttime = firstDate.getTime();
|
|
|
+ // // } else {
|
|
|
+ // // var lastDate = new Date();
|
|
|
+ // // var lastTime = lastDate.getTime();
|
|
|
+ // // if (lastTime - that.firsttime < 1000) {
|
|
|
+ // // that.changeTheme();
|
|
|
+ // // that.firsttime = 0;
|
|
|
+ // // }
|
|
|
+ // // }
|
|
|
+ // that.changeTheme();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ userName() {
|
|
|
+ return getCookie("username") || this.$store.state.user.username;
|
|
|
+ },
|
|
|
+ // activeClass(data) {
|
|
|
+ // return data.isActive ? "active" : "";
|
|
|
+ // },
|
|
|
+ currMenu() {
|
|
|
+ let stateRoutes = this.$store.state.routes.routes;
|
|
|
+ let currMenu = [];
|
|
|
+ if (stateRoutes.length) {
|
|
|
+ stateRoutes.forEach((route) => {
|
|
|
+ if (route.path !== "/login" && route.path !== "/") {
|
|
|
+ currMenu.push({
|
|
|
+ id: route.name,
|
|
|
+ text: route.meta.title,
|
|
|
+ path: route.path,
|
|
|
+ isActive: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // currMenu.splice(2, 0, {
|
|
|
+ // id: "zhbj",
|
|
|
+ // text: "综合报警",
|
|
|
+ // path: "",
|
|
|
+ // });
|
|
|
+ // currMenu.splice(5, 0, {
|
|
|
+ // id: "fdfx",
|
|
|
+ // text: "发电能力分析",
|
|
|
+ // path: "",
|
|
|
+ // });
|
|
|
+ // currMenu.push();
|
|
|
+ return currMenu;
|
|
|
+ } else {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ click(index, data) {
|
|
|
+ if (data.id === "zhbj") {
|
|
|
+ let jiami = encrypt(getCookie("jiami")).replace(/\+/g, " ");
|
|
|
+
|
|
|
+ // let url = `http://192.168.1.117:3002/#/check?username=${getCookie(
|
|
|
+ // "username"
|
|
|
+ // )}&jiami=${jiami}`;
|
|
|
+ let url = `http://10.81.3.154:8083/#/check?username=${getCookie(
|
|
|
+ "username"
|
|
|
+ )}&jiami=${jiami}`;
|
|
|
+ window.open(url);
|
|
|
+ return;
|
|
|
+ } else if (data.id === "fdfx") {
|
|
|
+ let jiami = encrypt(getCookie("jiami")).replace(/\+/g, " ");
|
|
|
+
|
|
|
+ // let url = `http://192.168.1.117:3002/#/check?username=${getCookie(
|
|
|
+ // "username"
|
|
|
+ // )}&jiami=${jiami}`;
|
|
|
+ let url = `http://10.81.3.155:8083/dlfx/#/check?username=${getCookie(
|
|
|
+ "username"
|
|
|
+ )}&jiami=${jiami}`;
|
|
|
+ window.open(url);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.activeIndex = index;
|
|
|
+ this.$router.push(data.path);
|
|
|
+ const ActiveModule = this.currMenu.find((ele) => {
|
|
|
+ return ele.path === data.path;
|
|
|
+ });
|
|
|
+ if (ActiveModule) {
|
|
|
+ this.$store.dispatch("changeModuleName", ActiveModule.text);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clickSubMenu(index, code) {},
|
|
|
+ clickMenu() {
|
|
|
+ this.dropdown = !this.dropdown;
|
|
|
+ },
|
|
|
+ changeTheme() {
|
|
|
+ $("#appBody").toggleClass("dark light");
|
|
|
+ this.$store.dispatch("changeTheme", $("#appBody").attr("class"));
|
|
|
+ this.$store.state.themeName === "dark" ?
|
|
|
+ (this.themeName = false) :
|
|
|
+ (this.themeName = true);
|
|
|
+ localStorage.setItem("themeName", this.$store.state.themeName);
|
|
|
+ },
|
|
|
+ handleCommand(command) {
|
|
|
+ if (command == "logout") {
|
|
|
+ logout({
|
|
|
+ token: getCookie("authToken"),
|
|
|
+ userId: getCookie("userId"),
|
|
|
+ }).then((res) => {
|
|
|
+ this.$store.commit("user/REMOVE_TOKEN");
|
|
|
+ this.$store.commit("changeStationAll", []);
|
|
|
+ this.$router.push("/login");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 跳转到管理系统
|
|
|
+ goToAdmin() {
|
|
|
+ let jiami = encrypt(getCookie("jiami")).replace(/\+/g, " ");
|
|
|
+
|
|
|
+ // let url = `http://192.168.1.104:80/#/check?username=${getCookie(
|
|
|
+ let url = `http://10.81.3.127:8083/#/check?username=${getCookie(
|
|
|
+ "username"
|
|
|
+ )}&jiami=${jiami}`;
|
|
|
+ window.open(url);
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ if (this.currMenu.length) {
|
|
|
+ this.currMenu.some((t, index) => {
|
|
|
+ if (val.path.includes(t.id)) {
|
|
|
+ this.activeIndex = index;
|
|
|
+ const ActiveModule = this.currMenu.find((ele) => {
|
|
|
+ return ele.path === t.path;
|
|
|
+ });
|
|
|
+ if (ActiveModule) {
|
|
|
+ this.$store.dispatch("changeModuleName", ActiveModule.text);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .admin-set-tooltip {
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .header-menu {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: @fontsize;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ .header-menu-list {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .header-menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 15px;
|
|
|
+ // width: 9.259vh;
|
|
|
+ height: 100%;
|
|
|
+ color: @font-color;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color 0.2s ease-in-out;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: @green;
|
|
|
+ position: relative;
|
|
|
+ background: @greenLinearTop;
|
|
|
+ transition: color 0.2s ease-in-out;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 3px;
|
|
|
+ border: 1px solid @green;
|
|
|
+ border-top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-menu-user {
|
|
|
+ width: 10%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .header-menu-user-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: @gray;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ i {
|
|
|
+ margin: 0 5px;
|
|
|
+
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dropdown-link {
|
|
|
+ color: #05bb4c;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #7a8385;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown {
|
|
|
+ .el-dropdown-menu {
|
|
|
+ background: #111d1c;
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ .el-dropdown-menu__item {
|
|
|
+ color: #dfeef1;
|
|
|
+ font-size: 14px !important;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #05bb4c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
sunzehao