|
|
@@ -0,0 +1,355 @@
|
|
|
+<template>
|
|
|
+ <div class="header-wrapper">
|
|
|
+ <div class="home-title">
|
|
|
+ <img src="@/assets/map/header-title.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="home-menu">
|
|
|
+ <div class="menus">
|
|
|
+ <div
|
|
|
+ class="menu-item"
|
|
|
+ v-for="(menu, index) of currMenu"
|
|
|
+ :key="menu"
|
|
|
+ @click="click(index, menu)"
|
|
|
+ :class="{ active: activeIndex == index }"
|
|
|
+ >
|
|
|
+ {{ menu.text }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="settings">
|
|
|
+ <el-dropdown
|
|
|
+ size="small"
|
|
|
+ trigger="click"
|
|
|
+ :hide-on-click="true"
|
|
|
+ popper-class="dropdown"
|
|
|
+ @command="handleCommand"
|
|
|
+ >
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ <i class="fa fa-user"></i>{{ userName }}
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item command="logout"> 退出登录 </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ content="后台管理系统"
|
|
|
+ placement="bottom"
|
|
|
+ popper-class="admin-set-tooltip"
|
|
|
+ >
|
|
|
+ <i class="svg-icon svg-icon-white svg-icon-sm" @click="goToAdmin">
|
|
|
+ <SvgIcon svgid="svg-admin-set"></SvgIcon>
|
|
|
+ </i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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: "economicsOperation",
|
|
|
+ text: "经济运行",
|
|
|
+ path: "/economicsOperation",
|
|
|
+ isActive: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "health",
|
|
|
+ text: "智慧检修",
|
|
|
+ // path: '/sandtable',
|
|
|
+ path: "/health",
|
|
|
+ isActive: false,
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // id: "decision",
|
|
|
+ // text: "决策支持",
|
|
|
+ // path: "/decision/decision1",
|
|
|
+ // isActive: false,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: "save",
|
|
|
+ // text: "安全管控",
|
|
|
+ // path: "/save",
|
|
|
+ // isActive: false,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: "znbb",
|
|
|
+ // text: "智能报表",
|
|
|
+ // path: "/znbb/reportPandect",
|
|
|
+ // isActive: false,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: "zhbj",
|
|
|
+ // text: "综合报警",
|
|
|
+ // path: "",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: "fdnlpt",
|
|
|
+ // text: "发电能力分析",
|
|
|
+ // path: "",
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ id: "others",
|
|
|
+ text: "智能报表",
|
|
|
+ path: "/others",
|
|
|
+ isActive: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ activeIndex: 0,
|
|
|
+ menuUrl: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: { SvgIcon },
|
|
|
+ mounted() {},
|
|
|
+ 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") {
|
|
|
+ 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;
|
|
|
+ } else if (data.id === "stateMonitor") {
|
|
|
+ this.$emit("changeShowSisView", false);
|
|
|
+ this.menuUrl = "/stateMonitor/factoryMonitor/windPowerPlant/windhome";
|
|
|
+ } else if (data.id === "economicsOperation") {
|
|
|
+ this.$emit("changeShowSisView", false);
|
|
|
+ this.menuUrl =
|
|
|
+ "/economicsOperation/benchmarkingManagement/performanceRankingList";
|
|
|
+ } else if (data.id === "health") {
|
|
|
+ this.$emit("changeShowSisView", false);
|
|
|
+ this.menuUrl = "/health/healthManagement/first";
|
|
|
+ }
|
|
|
+ this.activeIndex = index;
|
|
|
+ this.$router.push(this.menuUrl);
|
|
|
+ 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.$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 lang="less" scoped>
|
|
|
+.header-wrapper {
|
|
|
+ height: 4.17vh; //45px
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 0.91vw; //30px
|
|
|
+ padding-right: 0.91vw; //30px
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 0.09vh solid #142b29;
|
|
|
+ justify-content: space-between;
|
|
|
+ .home-title {
|
|
|
+ width: 30%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-menu {
|
|
|
+ height: 100%;
|
|
|
+ font-size: 1.48vh; //16px
|
|
|
+ display: flex;
|
|
|
+ .menus {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ .menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 0.82vw; //27px
|
|
|
+ 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: 0.19vh; //2px
|
|
|
+ background: @green;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .settings::v-deep {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ .el-dropdown {
|
|
|
+ color: #05bb4c !important;
|
|
|
+ font-size: 1.48vh !important; //16px
|
|
|
+ margin-right: 0.3vw;
|
|
|
+ .el-dropdown-link {
|
|
|
+ .fa {
|
|
|
+ margin-right: 0.15vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.dropdown {
|
|
|
+ .el-dropdown-menu {
|
|
|
+ background: #111d1c;
|
|
|
+ border-radius: 0.46vh;
|
|
|
+ .el-dropdown-menu__item {
|
|
|
+ color: #dfeef1;
|
|
|
+ font-size: 1.48vh !important; //16px
|
|
|
+ &:hover {
|
|
|
+ color: #05bb4c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.admin-set-tooltip {
|
|
|
+ font-size: 0.43vw !important;
|
|
|
+}
|
|
|
+</style>
|
baiyanting
