header样式修改

nezha-fronted/package-lock.json

@@ -218,13 +218,6 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true,
-      "optional": true
-    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -5559,13 +5552,6 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
-    "image-size": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
-      "dev": true,
-      "optional": true
-    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -6124,56 +6110,6 @@
         "invert-kv": "^1.0.0"
       }
     },
-    "less": {
-      "version": "3.10.3",
-      "resolved": "https://registry.npmjs.org/less/-/less-3.10.3.tgz",
-      "integrity": "sha512-vz32vqfgmoxF1h3K4J+yKCtajH0PWmjkIFgbs5d78E/c/e+UQTnI+lWK+1eQRE95PXM2mC3rJlLSSP9VQHnaow==",
-      "dev": true,
-      "requires": {
-        "clone": "^2.1.2",
-        "errno": "^0.1.1",
-        "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "mime": "^1.4.1",
-        "mkdirp": "^0.5.0",
-        "promise": "^7.1.1",
-        "request": "^2.83.0",
-        "source-map": "~0.6.0"
-      },
-      "dependencies": {
-        "clone": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
-          "dev": true
-        }
-      }
-    },
-    "less-loader": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
-      "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
-      "dev": true,
-      "requires": {
-        "clone": "^2.1.1",
-        "loader-utils": "^1.1.0",
-        "pify": "^4.0.1"
-      },
-      "dependencies": {
-        "clone": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
-          "dev": true
-        },
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-          "dev": true
-        }
-      }
-    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -9844,16 +9780,6 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",

nezha-fronted/src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
+    <keep-alive>
       <router-view style="height: 100%"/>
+    </keep-alive>
   </div>
 </template>
 

nezha-fronted/src/assets/stylus/main.scss

@@ -696,4 +696,7 @@ html {
   width: 520px;
   height: calc(100% - 100px);
 }
-
+/*子菜单选中样式*/
+.nz-submenu .el-menu--popup .el-menu-item .menu-item-active{
+  color:$global-text-color-active !important;
+}

nezha-fronted/src/components/common/header.vue

@@ -22,23 +22,25 @@
       </el-submenu>
       <el-submenu index="1" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('dashboard')">{{$t('overall.dashboard')}}</div>
+          <div @click="jumpTo('dashboard')" :class ="(activeIndex == 'dashboard' || activeIndex == 'panel' || activeIndex == 'metricPreview') ? 'menu-active' :'' " >
+            {{$t('overall.dashboard')}} 
+          </div>
         </template>
         <el-menu-item index="1-0">
-          <div @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
+          <div @click="jumpTo('panel')" :class="{'menu-item-active' :activeIndex == 'panel'}" >{{$t('dashboard.panel.title')}}</div>
         </el-menu-item>
         <el-menu-item index="1-1">
-          <div @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
+          <div @click="jumpTo('metricPreview')" :class="{'menu-item-active' :activeIndex == 'metricPreview'}">{{$t('dashboard.metricPreview.title')}}</div>
         </el-menu-item>
       </el-submenu>
 
       <el-submenu index="2" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
+          <div @click="jumpToProject(projectData[0])" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
         </template>
         <template v-for="(item, index) in projectData">
           <el-menu-item :index="'2-' + index">
-            <div @click="jumpToProject(item)">
+            <div @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item )}">
               <span>{{item.name}}</span>
               <div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit"
                                                                           class="el-icon-edit-outline"></i></div>
@@ -48,11 +50,11 @@
       </el-submenu>
       <el-submenu index="3" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('asset')">{{$t('overall.asset')}}</div>
+          <div @click="jumpTo('asset')" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
         </template>
         <template v-for="(item, index) in assetData">
           <el-menu-item :index="'3-' + index">
-            <div @click="jumpToAsset('asset',item.id)">
+            <div @click="jumpToAsset('asset',item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && activeItemIndex == item.id ) }">
               <span>{{item.name}}</span>
               <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
                 <template v-slot:optionZone>
@@ -67,24 +69,24 @@
       </el-submenu>
       <el-submenu index="4-0" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
+          <div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' ? 'menu-active' :''">{{$t('overall.alert')}}</div>
         </template>
         <el-menu-item index="4-1">
-          <div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
+          <div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' ? 'menu-item-active' :''">{{$t('alert.alertList')}}</div>
         </el-menu-item>
         <el-menu-item index="4-2">
-          <div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
+          <div @click="jumpTo('alertConfig')" :class ="activeIndex == 'alertConfig' ? 'menu-item-active' :''">{{$t('alert.alertConfig')}}</div>
         </el-menu-item>
       </el-submenu>
       <el-submenu index="5" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('account')">{{$t('overall.config')}}</div>
+          <div @click="jumpTo('account')" :class ="activeIndex == 'account' ? 'menu-active' :''">{{$t('overall.config')}}</div>
         </template>
         <el-menu-item index="5-0">
-          <div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
+          <div @click="jumpTo('account')" :class="{'menu-item-active' :(activeIndex == 'account' )}">{{$t('config.account.account')}}</div>
         </el-menu-item>
         <el-menu-item index="5-1">
-          <div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
+          <div @click="jumpTo('promServer')" :class="{'menu-item-active' :(activeIndex == 'promServer' )}">{{$t('config.promServer.promServerList')}}</div>
         </el-menu-item>
       </el-submenu>
       <el-submenu index="6" popper-class="nz-submenu">
@@ -123,6 +125,8 @@
         username: sessionStorage.getItem("nz-username"),
         language: localStorage.getItem("nz-language"),
         assetData: [],
+        activeIndex:'',
+        activeItemIndex:'',
         editPanel:{//新增or编辑的panel
           id:'',
           name: ''
@@ -202,12 +206,15 @@
     },
     methods: {
       jumpTo(data) {
+         
         this.$router.push({
           path: "/" + data,
           query: {
             t: +new Date()
           }
         });
+        this.activeIndex = data
+        
       },
   
       createBox(item) {
@@ -241,11 +248,13 @@
         } else {
           this.$store.state.assetData.step = this.$store.state.assetData.step+1;
         }
+        this.activeItemIndex = id
         this.jumpTo(data);
       },
       jumpToProject(p) {
         this.currentProject = p;
         this.$store.commit('setProject', p);
+        this.activeItemIndex = p
         this.jumpTo('project');
       },
       getUserData() {
@@ -401,7 +410,15 @@
   .header .el-menu {
     background-color: transparent;
   }
-
+  .header .el-menu--horizontal>.el-submenu .el-submenu__title .menu-active{
+    border-bottom:$global-text-color-active solid 2px;
+    border-radius: 2px;
+    height: 22px;
+    line-height: 16px;
+    display: inline-block;
+    font-size: 16px;
+    margin: 0 auto ;
+  }
   .header .el-menu--horizontal>.el-submenu .el-submenu__title i {
     color: inherit;
   }
@@ -439,7 +456,9 @@
     border-bottom: 0px;
     color: white;
   }*/
-
+  .el-submenu.is-active .el-submenu__title{
+    border-bottom-color: transparent !important;
+  }
   .el-menu--horizontal.nz-submenu {
     border: 1px solid #bbbbbb;
     border-top: none;
@@ -452,7 +471,6 @@
   .nz-submenu .el-menu--popup .el-menu-item {
     background-color: white !important;
   }
-
   .nz-submenu .el-menu--popup-bottom-start {
     margin-top: 0;
     box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
@@ -464,7 +482,7 @@
     transition: none;
   }
 
-  .nz-submenu.el-menu--horizontal .el-menu .el-menu-item:hover {
+  .nz-submenu.el-menu--horizontal .el-menu .el-menu-item:hover,.nz-submenu.el-menu--horizontal   {
     color: $global-text-color-active !important;
   }
 

nezha-fronted/src/components/page/asset/asset.vue

@@ -359,7 +359,9 @@
           if (val) {
             for (let i = 0; i < this.checkListData.length; i++) {
               this.checkList.push(this.checkListData[i].id);
+              this.$store.commit('assetItemIdChange',this.checkListData[i].id)
             }
+            this.$store.commit('assetAllIdChange',this.checkListData)
           }
           this.checkAllHandler = false;
         }

nezha-fronted/src/store/index.js

@@ -15,6 +15,8 @@ const store = new Vuex.Store({
       name: '',
       remark: ''
     },
+    assetItemId:''  ,   //复选框ID
+    assetAllId:[]  ,   //复选框allID
     projectListChange: 0,
     moduleListChange: 0,
     flushDataSign: false,
@@ -53,6 +55,12 @@ const store = new Vuex.Store({
     setHeaderTable(state, data) { //设置table头部
       state.tablelable = data;
     },
+    assetItemIdChange(state,data){ //修改复选框
+      state.assetItemId = data
+    },
+    assetAllIdChange(state,data){ //修改复选框
+			state.assetAllId = data
+    },
     setEventfixed(state, data) { //设置坐标
       state.eventfixed = data;
     },