header样式修改

2020-01-15 09:51:52 +08:00
parent 65646c0fb3
commit e7efaf0ac2
6 changed files with 54 additions and 95 deletions
--- a/nezha-fronted/package-lock.json
+++ b/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",
--- a/nezha-fronted/src/App.vue
+++ b/nezha-fronted/src/App.vue
@@ -1,6 +1,8 @@
 <template>
  <div id="app">
+    <keep-alive>
      <router-view style="height: 100%"/>
+    </keep-alive>
  </div>
 </template>

--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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;
+}
--- a/nezha-fronted/src/components/common/header.vue
+++ b/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;
  }

--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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;
        }
--- a/nezha-fronted/src/store/index.js
+++ b/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;
    },