|
@@ -8,7 +8,8 @@
|
|
|
<template>
|
|
|
<div class="windLife" :class="!swichTheme ? 'themeDark' : 'themeLight'">
|
|
|
<common-header v-if="showHeader" @headerName="headerName" @swichFn="swichFn"></common-header>
|
|
|
- <div class="menu-body" v-if="isShowMenuDiv" @mouseenter="showMenu" @mouseleave="hideMenu">
|
|
|
+ <div class="menu-body" :class="!fixed ? 'menuBs' : ''" v-if="isShowMenu" @mouseenter="showMenu"
|
|
|
+ @mouseleave="hideMenu">
|
|
|
<ul class="menu-list">
|
|
|
<li class="menu-item" v-for="(menu, index) in showMenuData" :key="index"
|
|
|
@click="handleNodeClick(menu.index)">
|
|
@@ -20,9 +21,17 @@
|
|
|
</el-tooltip>
|
|
|
</router-link>
|
|
|
</li>
|
|
|
+ <li class="lockpage" @click="handleClickFixed">
|
|
|
+ <el-icon v-if="fixed" style="width:25px;height:25px">
|
|
|
+ <Lock />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon v-else style="width:25px;height:25px">
|
|
|
+ <Unlock />
|
|
|
+ </el-icon>
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div :style="{ paddingLeft: fixed ? '63px' : 0 }">
|
|
|
+ <div :style="{ paddingLeft: fixed ? '65px' : 0 }">
|
|
|
<router-view />
|
|
|
</div>
|
|
|
|
|
@@ -86,6 +95,11 @@
|
|
|
name: 'ERP'
|
|
|
},
|
|
|
{
|
|
|
+ icon: 'Memo',
|
|
|
+ index: '/intelligentReport/czzyb',
|
|
|
+ name: '场站自由报表'
|
|
|
+ },
|
|
|
+ {
|
|
|
icon: 'Finished',
|
|
|
index: '/intelligentReport/reporting',
|
|
|
name: '报表上报'
|
|
@@ -154,11 +168,14 @@
|
|
|
$route: {
|
|
|
handler: function (route) {
|
|
|
this.showHeader = route.path === '/login' ? false : true
|
|
|
- this.isShowMenuDiv = route.path === '/login' || route.path === '/home' ? false : true
|
|
|
+ this.isShowMenu = route.path === '/login' || route.path === '/home' ? false : true
|
|
|
},
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ debugger
|
|
|
+ },
|
|
|
mounted() {
|
|
|
if (!JSON.parse(window.sessionStorage.getItem('theme'))) {
|
|
|
document.getElementById('app').style.background = '#040c0b'
|
|
@@ -172,18 +189,20 @@
|
|
|
}
|
|
|
this.$emit('swichFn', this.switchTheme)
|
|
|
}
|
|
|
+ this.fixed = window.sessionStorage.getItem('menufixed')
|
|
|
+ this.isShowMenu = window.sessionStorage.getItem('isShowMenu')
|
|
|
|
|
|
- if (window.sessionStorage.getItem('headerRoute')) {
|
|
|
- let str = window.sessionStorage.getItem('headerRoute')
|
|
|
- // let str = window.location.href
|
|
|
- if (str.indexOf('powerPrediction') > -1) {
|
|
|
- this.showMenuData = this.powerPreDatas
|
|
|
- } else if (str.indexOf('intelligentReport') > -1) {
|
|
|
- this.showMenuData = this.intelligentReportDatas
|
|
|
- } else if (str.indexOf('generatingCap') > -1) {
|
|
|
- this.showMenuData = this.generatingCapDatas
|
|
|
- }
|
|
|
+ // if (window.sessionStorage.getItem('headerRoute')) {
|
|
|
+ // let str = window.sessionStorage.getItem('headerRoute')
|
|
|
+ let str = window.location.href
|
|
|
+ if (str.indexOf('powerPrediction') > -1) {
|
|
|
+ this.showMenuData = this.powerPreDatas
|
|
|
+ } else if (str.indexOf('intelligentReport') > -1) {
|
|
|
+ this.showMenuData = this.intelligentReportDatas
|
|
|
+ } else if (str.indexOf('generatingCap') > -1) {
|
|
|
+ this.showMenuData = this.generatingCapDatas
|
|
|
}
|
|
|
+ // }
|
|
|
},
|
|
|
methods: {
|
|
|
headerName(name) {
|
|
@@ -217,7 +236,7 @@
|
|
|
hideMenu() {
|
|
|
if (!this.fixed) {
|
|
|
this.memuCloseTimeout = setTimeout(() => {
|
|
|
- this.isShowMenu = false;
|
|
|
+ this.isShowMenu = true;
|
|
|
window.sessionStorage.setItem('isShowMenu', this.isShowMenu)
|
|
|
}, 500);
|
|
|
}
|
|
@@ -229,7 +248,7 @@
|
|
|
},
|
|
|
handleClickFixed() {
|
|
|
this.fixed = !this.fixed
|
|
|
- console.log('fixed===>>>>', this.fixed)
|
|
|
+ window.sessionStorage.setItem('menufixed', JSON.stringify(this.fixed))
|
|
|
if (this.fixed) {
|
|
|
this.isShowMenu = true
|
|
|
window.sessionStorage.setItem('isShowMenu', this.isShowMenu)
|
|
@@ -256,9 +275,7 @@
|
|
|
top: 60px;
|
|
|
background-color: fade(#21192a, 75%);
|
|
|
z-index: 2002;
|
|
|
- opacity: 0;
|
|
|
- transition: opacity 0.2s;
|
|
|
- transition-timing-function: ease-in;
|
|
|
+
|
|
|
|
|
|
&:hover {
|
|
|
opacity: 1;
|
|
@@ -291,37 +308,10 @@
|
|
|
font-size: 14px;
|
|
|
text-decoration: unset;
|
|
|
white-space: nowrap;
|
|
|
-
|
|
|
- .menu-icon {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
-
|
|
|
- use {
|
|
|
- fill: fade(#05bb4c, 75);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
background: #323e70;
|
|
|
-
|
|
|
- .menu-icon {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- svg use {
|
|
|
- fill: fade(#fff, 75);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .sub-menu-text {
|
|
|
- margin-left: 10px;
|
|
|
- color: #B3BDC0;
|
|
|
}
|
|
|
|
|
|
&+.menu-item {
|
|
@@ -344,6 +334,12 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .menuBs {
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.2s;
|
|
|
+ transition-timing-function: ease-in;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
@import "./assets/css/main.css";
|