NEZ-351 perf: 完成左侧菜单抽取

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

@@ -492,7 +492,6 @@ li{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  vertical-align: middle;
 }
 .side-bar-menu-edit {
   line-height: 20px;

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

@@ -58,7 +58,7 @@
       <el-submenu index="3" popper-class="nz-submenu">
         <template slot="title">
           <div v-if="assetData.length == 0">{{$t('overall.asset')}}</div>
-          <div v-else @click="jumpTo('asset', 3)" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
+          <div v-else @click="jumpToAsset(assetData[0])" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
         </template>
         <template>
           <el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
@@ -339,14 +339,18 @@
           this.rightBox.alertRule.show = true;
         }
       },
-      jumpToAsset(asset) {
+      jumpToAsset(dc) {
-        this.activeItemIndex = asset.id;
+        this.activeItemIndex = dc.id;
-        this.$store.commit('currentAssetChange', asset);
+        bus.$emit("header-dc-change", dc.id); //发送给leftMenu
         this.jumpTo('asset', "assets");
       },
       jumpToProject(p) {
         this.currentProject = p;
+
         this.$store.commit('currentProjectChange', p);
+        bus.$emit("project-page-type", 'project');
+        localStorage.setItem('nz-current-project', p.id);
+
         this.activeItemIndex = p.id;
         this.jumpTo('project', 'projects');
       },

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

@@ -1,13 +1,18 @@
 <template>
   <div class="content">
     <div class="content-left left-slot" :class="{'left-slot-shrink': isShrink}">
-      <div class="sidebar-title too-long-split">{{menus[parentMenu].title}}</div>
+      <div class="sidebar-title too-long-split">
-      <div class="sidebar-info">
+        <template v-if="parentMenu == 'projects'">{{$t("overall.project")}}</template>
+        <template v-else-if="parentMenu == 'assets'">{{$t("overall.asset")}}</template>
+        <template v-else>{{menus[parentMenu].title}}</template>
+      </div>
+      <div class="sidebar-info" style="height: 90%">
+        <el-scrollbar style="height: 100%;">
           <template v-if="parentMenu == 'projects'">
-          <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top: 0px;" ref="projectLeft">
+            <el-collapse v-model="currentProject.id + ''" class="left-menu-bg" accordion style="padding-top: 0;" ref="projectLeft">
-            <el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
+              <el-collapse-item v-for="(item, index) in projectList" :key="item.id" :name="item.id + ''">
                 <template slot="title">
-                <div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject($event, item)" :id="'project-module-'+item.id">
+                  <div class="sidebar-info-item-project sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject(item)" :id="'project-module-'+item.id">
                     <div class="sidebar-info-item-txt">
                       <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
                       <span slot="reference" class="">
@@ -36,13 +41,73 @@
             </el-collapse>
           </template>
           <template v-else-if="parentMenu == 'assets'">
-
+            <el-collapse v-model="activeType" class="left-menu-bg">
+              <el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
+                <el-checkbox-group v-model="dcCheckList" size="small">
+                  <el-checkbox class="sidebar-info-item sidebar-info-item-asset" :class="{'sidebar-info-item-active': indOf(dcCheckList, item.id)}"
+                               v-for="(item,key) in dcData" :key="key" :label=item.id>
+                    <div class="sidebar-info-item-txt">
+                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
+                        <span slot="reference">{{item.name}}</span>
+                      </el-popover>
+                      <span v-else>{{item.name}}</span>
+                    </div>
+                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total<99">
+                      <el-badge class="mark" :value="item.total" :max="99"/>
+                    </el-tooltip>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+              <el-collapse-item name="assetType" :title="$t('asset.assetType')">
+                <el-checkbox-group v-model="assetTypeCheckList" size="small" @change="changeAssetTypeCheckBox">
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item, key) in assetTypeData" :key="key" :label=item.id>
+                    <div class="sidebar-info-item-txt">
+                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
+                        <span slot="reference">{{item.name}}</span>
+                      </el-popover>
+                      <span v-else>{{item.name}}</span>
+                    </div>
+                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total<99">
+                      <el-badge class="mark" :value="item.total" :max="99"/>
+                    </el-tooltip>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+              <el-collapse-item name="vendor" :title="$t('asset.left.vendor')">
+                <el-checkbox-group v-model="vendorCheckList" size="small" @change="changeVendorCheckBox">
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item, key) in vendorData" :key="key" :label=item.id>
+                    <div class="sidebar-info-item-txt">
+                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
+                        <span slot="reference">{{item.name}}</span>
+                      </el-popover>
+                      <span v-else>{{item.name}}</span>
+                    </div>
+                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total<99">
+                      <el-badge class="mark" :value="item.total" :max="99"/>
+                    </el-tooltip>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+              <el-collapse-item name="ping" :title="$t('asset.left.ping')">
+                <el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" v-for="(item, index) in pingData" :key="index" :label="item.label">
+                    <div class="sidebar-info-item-txt">
+                      <span>{{item.label}}</span>
+                    </div>
+                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total < 99">
+                      <el-badge class="mark" :value="item.total" :max="99"/>
+                    </el-tooltip>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+            </el-collapse>
           </template>
           <template v-else>
             <div v-for="menu in menus[parentMenu].menu" class="sidebar-info-item" :class="{'sidebar-info-item-active': menu.route == active}" @click="jumpTo(menu.route)">
               {{menu.name}}
             </div>
           </template>
+        </el-scrollbar>
       </div>
       <div @click="toggleStat" class="bottom-icon">
         <div class="bottom-divider"></div>
@@ -66,15 +131,29 @@
         return{
           isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
           parentMenu: "dashboards",
-          active: "overview",
+          active: "/overview",
 
+          //project相关
           projectList: [],
           moduleList: [],
+          showProjectPanel: true,
           currentProjectTitle: '',
           currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
           module: {}, //编辑的module
           blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
           currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
+          ready: false,
+
+          //asset相关
+          activeType: 'dataCenter',
+          dcData: [],
+          dcCheckList: [],
+          assetTypeData: [],
+          assetTypeCheckList: [],
+          vendorData: [],
+          vendorCheckList: [],
+          pingData: [],
+          pingCheckList: [],
 
           menus: {
             settings: {
@@ -160,24 +239,34 @@
           immediate: true,
           handler(n, o) {
             if (n && n.id != this.currentProject.id) {
-              this.currentProject = this.projectList.find(p => {
+              this.currentProject = n;
-                return p.id == n.id;
+              if (this.currentProject && this.currentProject.id && this.showProjectPanel) {
-              });
+                this.detailProject(this.currentProject);
-              if (this.currentProject && this.currentProject.id) {
-                this.detailProject(null, this.currentProject);
               }
             }
           },
         },
+        dcCheckList(n, o) {
+          setTimeout(() => {
+            if (n.length > 0 ) {
+              bus.$emit("asset-filter-change", "idcIds", n.join(','));
+            } else {
+              bus.$emit("asset-filter-change", "idcIds", "");
+            }
+          }, 100);
+        },
         currentProject(n, o) {
-          bus.$emit("current-project-change", n);
+          bus.$emit("current-project-change", n); //告知project.vue
-        },
-        currentModule(n, o) {
-          bus.$emit("current-module-change", n);
         },
       },
       mounted() {
-        Promise.all([this.getProjectList(), this.getModuleList()]).then(response => {
+        Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).then(response => {
+          /*//左侧dc列表初始选中状态
+          if (this.$store.state.assetData.selectedData.length > 0) {
+            this.checkList = [];
+            this.checkList = this.$store.state.assetData.selectedData;
+          }*/
+
           let cacheParentMenu = localStorage.getItem('nz-parent-menu');
           let cacheMenu = localStorage.getItem('nz-menu');
           if (cacheParentMenu) {
@@ -188,11 +277,7 @@
           if (cacheMenu) {
             this.active = cacheMenu;
           } else {
-            if (this.parentMenu == 'projects') {
+            if (this.parentMenu != 'projects' && this.parentMenu != 'assets') {
-              this.projectList.length > 0 && (this.active = this.projectList[0].name)
-            } else if (this.parentMenu == 'assets') {
-
-            } else {
               this.active = this.menus[this.parentMenu].menu[0].route;
             }
           }
@@ -202,6 +287,14 @@
           bus.$on("menu-change", menu => {
             this.active = menu;
           });
+          bus.$on("header-dc-change", dcId => {
+            this.dcCheckList = [dcId];
+            bus.$emit("asset-filter-change", "idcIds", dcId);
+          });
+
+          setTimeout(() => {
+            this.ready = true;
+          }, 300);
         });
       },
       methods: {
@@ -247,28 +340,104 @@
             });
           });
         },
-        //左侧module列表选中切换
+        //左侧module列表选中切换，与project.vue同步
         changeModule(project, module) {
+          this.showProjectPanel = false;
+          this.changeCurrentProject(project);
+          this.changeCurrentModule(module);
+          bus.$emit("project-page-type", "endpoint");  //告知project.vue
+        },
+        addModule() {
+          /*this.module = this.newModule();
+          this.rightBox.module.show = true;
+          this.$nextTick(() => {
+            this.$refs.moduleBox.initWalk();
+          });*/
+        },
+        changeCurrentProject(project) {
+          localStorage.setItem("nz-current-project", project.id);
+          this.$store.commit("currentProjectChange", project);
+          this.currentProject = project;
+        },
+        changeCurrentModule(module) {
+          bus.$emit("current-module-change", module);  //告知project.vue
           this.currentModule = module;
-          this.currentProject = project;
         },
-        detailProject(event, project) {
+        //与header.vue同步
-          bus.$emit("project-pageType", "project");
+        detailProject(project) {
-          if(event) {
+          this.showProjectPanel = true;
-            if(project) {
+          this.changeCurrentProject(project);
-              this.currentProject = project;
+          bus.$emit("project-page-type", "project");  //告知project.vue
+          this.changeCurrentModule({id: ""});
+        },
+
+        // 获取asset左侧菜单数据
+        getLeftMenuList(){
+          return new Promise(resolve => {
+            this.$get('asset/filter').then(response => {
+              if (response.code === 200) {
+                //dc
+                this.dcData = response.data.dc;
+                // AssetType
+                this.assetTypeData = response.data.assetType;
+                // vendor
+                this.vendorData = response.data.vendor;
+                // ping
+                this.pingData = response.data.ping.map(item => {
+                  item.label = item.name;
+                  item.value = item.status;
+                  return item;
+                });
               }
+              resolve();
+            });
+          });
+        },
+        changeCheckBox() {
+          this.assetClick = true;
+        },
+        changeAssetTypeCheckBox() {
+          if(this.assetTypeCheckList && this.assetTypeCheckList.length > 0){
+            let assetTypeIds = this.assetTypeCheckList.join(',');
+            bus.$emit("asset-filter-change", "typeIds", assetTypeIds);
+          }else{
+            bus.$emit("asset-filter-change", "typeIds", "");
+            this.pageObj.typeIds='';
+          }
+          this.getTableData();
+        },
+        changeVendorCheckBox() {
+          if(this.vendorCheckList && this.vendorCheckList.length > 0){
+            let vendorIds = this.vendorCheckList.join(',');
+            bus.$emit("asset-filter-change", "vendorIds", vendorIds);
+          }else{
+            bus.$emit("asset-filter-change", "vendorIds", "");
+          }
+          this.getTableData();
+        },
+        changePingCheckBox() {
+          if(this.pingCheckList && this.pingCheckList.length > 0){
+            let pingStates = this.pingCheckList.join(',');
+            bus.$emit("asset-filter-change", "pingStates", pingStates);
+          }else{
+            bus.$emit("asset-filter-change", "pingStates", "");
+          }
+        },
+        indOf(a, b) {
+          let c = [];
+          for (let i = 0; i < a.length; i++) {
+            c.push(a[i]);
+          }
+          if (c.indexOf(b) > -1) {
+            return true;
           } else {
-            this.currentProjectTitle = project.id + "";
+            return false;
           }
-          this.currentModule = {};
         },
-
-
         jumpTo(route) {
           bus.$emit("menu-change", route);
           localStorage.setItem('nz-parent-menu', this.parentMenu);
-          localStorage.setItem('menu-change', route);
+          localStorage.setItem('nz-menu-change', route);
           this.$router.push({
             path: route,
             query: {
@@ -319,6 +488,42 @@
     transition: opacity 200ms;
   }
 
+
+  .item-tip-hide {
+    display: none;
+    position: absolute;
+    bottom: 34px;
+    min-width: 50px;
+    white-space: normal;
+  }
+  .item-tip:hover>.item-tip-show {
+    display: block;
+  }
+  .hid-div{
+    visibility: hidden;
+  }
+  .sidebar-info-sub-item:hover .hid-div{
+    visibility: visible;
+  }
+
+  .sub-sidebar-info{
+    padding-top: 10px !important;
+    padding-left: 10px;
+    box-sizing: border-box;
+  }
+  .sub-side-bar-menu-edit{
+    margin-right: 18px;
+  }
+
+  .sidebar-info-item-project.sidebar-info-item{
+    margin:0 !important;
+  }
+  .sidebar-info-item-asset .sidebar-info-item-txt{
+    vertical-align: text-top;
+  }
+  /deep/ .el-badge__content{
+    min-width: 15px;
+  }
   .left-slot .bottom-icon{
     position:absolute;
     width: 36px;
@@ -330,7 +535,7 @@
     visibility: hidden;
   }
   .left-slot:hover{
-    i{
+    .bottom-icon i{
       visibility: visible;
     }
   }

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

@@ -59,6 +59,8 @@ export default {
             localStorage.setItem('nz-sys-default-cabinet-usize',res.data.defaultCabinetUsize);
             localStorage.setItem('nz-sys-max-terminal-num',res.data.maxTerminalNum);
             localStorage.setItem('nz-sys-asset-ping-switch',res.data.assetPingSwitch);
+            localStorage.setItem('nz-parent-menu', "dashboards");
+            localStorage.setItem('nz-menu', "/overview");
             this.$i18n.locale = this.lang;
             bus.$emit('login');
             this.$router.push({

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

@@ -1,74 +1,5 @@
 <template>
   <div class="asset" ref="asset">
-    <left-menu >
-      <div slot="content-left" class="slot-content">
-        <div class="sidebar-title">{{$t('asset.asset')}}</div>
-        <div class="sidebar-info" style="height: 90%">
-          <el-scrollbar ref="leftScrollbar" style="height: 100%">
-            <el-collapse v-model="activeType" class="left-menu-bg">
-              <el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
-                <el-checkbox-group v-model="dcCheckList" size="small" @change="changeCheckBox">
-                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(dcCheckList, item.id)}"
-                               v-for="(item,key) in dcData" :key="key" :label=item.id>
-                    <div class="sidebar-info-item-txt">
-                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
-                        <span slot="reference">{{item.name}}</span>
-                      </el-popover>
-                      <span v-else>{{item.name}}</span>
-                    </div>
-                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total<99">
-                      <el-badge class="mark" :value="item.total" :max="99"/>
-                    </el-tooltip>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </el-collapse-item>
-              <el-collapse-item name="assetType" :title="$t('asset.assetType')">
-                <el-checkbox-group v-model="assetTypeCheckList" size="small" @change="changeAssetTypeCheckBox">
-                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item, key) in assetTypeData" :key="key" :label=item.id>
-                    <div class="sidebar-info-item-txt">
-                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
-                        <span slot="reference">{{item.name}}</span>
-                      </el-popover>
-                      <span v-else>{{item.name}}</span>
-                    </div>
-                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total<99">
-                      <el-badge class="mark" :value="item.total" :max="99"/>
-                    </el-tooltip>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </el-collapse-item>
-              <el-collapse-item name="vendor" :title="$t('asset.left.vendor')">
-                <el-checkbox-group v-model="vendorCheckList" size="small" @change="changeVendorCheckBox">
-                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item, key) in vendorData" :key="key" :label=item.id>
-                    <div class="sidebar-info-item-txt">
-                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
-                        <span slot="reference">{{item.name}}</span>
-                      </el-popover>
-                      <span v-else>{{item.name}}</span>
-                    </div>
-                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total<99">
-                      <el-badge class="mark" :value="item.total" :max="99"/>
-                    </el-tooltip>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </el-collapse-item>
-              <el-collapse-item name="ping" :title="$t('asset.left.ping')">
-                <el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
-                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" v-for="(item, index) in pingData" :key="index" :label="item.label">
-                    <div class="sidebar-info-item-txt">
-                      <span>{{item.label}}</span>
-                    </div>
-                    <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total < 99">
-                      <el-badge class="mark" :value="item.total" :max="99"/>
-                    </el-tooltip>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </el-collapse-item>
-            </el-collapse>
-          </el-scrollbar>
-        </div>
-      </div>
-      <div slot="content-right" class="slot-content">
     <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
       <div class="main-modal"></div>
       <div class="top-tools" v-show="bottomBox.mainResizeShow">
@@ -226,8 +157,6 @@
                   @exitFullScreen="exitFullScreen"
                   @listResize="listResize" ></bottom-box>
     </transition>
-      </div>
-    </left-menu>
     <transition name="right-box">
       <asset-box v-if="rightBox.show" :asset="asset" @refresh="flushData" ref="assetBox" @close="closeRightBox"></asset-box>
     </transition>
@@ -420,14 +349,14 @@
           }],
         tableData: [],
 
-        dcData: [],
+        /*dcData: [],
         dcCheckList: [],
         assetTypeData: [],
         assetTypeCheckList: [],
         vendorData: [],
         vendorCheckList: [],
         pingData: [],
-        pingCheckList: [],
+        pingCheckList: [],*/
 
         pageObj: {
           id: '',
@@ -438,7 +367,6 @@
           idcIds: ''
         },
 
-        assetClick: false,
         assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
       }
     },
@@ -464,9 +392,6 @@
           } else {
             this.pageObj.idcIds = '';
           }
-          if (this.assetClick) {
-            this.$store.state.assetData = {selectedData: n, step: this.$store.state.assetData.step+1, type: 0};
-          }
           this.getTableData();
         }, 50);
       },
@@ -511,17 +436,6 @@
           }
         }
       },
-      indOf(a, b) {
-        let c = [];
-        for (let i = 0; i < a.length; i++) {
-          c.push(a[i]);
-        }
-        if (c.indexOf(b) > -1) {
-          return true;
-        } else {
-          return false;
-        }
-      },
       elementsetShow(s, e) {
         this.tools.showElementSet = true;
         this.$nextTick(() => {
@@ -580,7 +494,7 @@
           }
         });
       },
-      getDcData() {
+      /*getDcData() {
         return new Promise(resolve => {
           this.$get('idc').then(response => {
             if (response.code === 200) {
@@ -609,7 +523,7 @@
             resolve(this.vendorData);
           });
         });
-      },
+      },*/
       getUserData() {
         return new Promise(resolve => {
           this.$get('sys/user/list').then(response => {
@@ -664,17 +578,6 @@
           this.$set(item, item.id + item.name, false)
         })
       },
-      indOf(a, b) {
-        let c = [];
-        for (let i = 0; i < a.length; i++) {
-          c.push(a[i]);
-        }
-        if (c.indexOf(b) > -1) {
-          return true;
-        } else {
-          return false;
-        }
-      },
       showEndpoint(asset) {
         this.bottomBox.asset = Object.assign({}, asset);
         this.bottomBox.targetTab = "endpoint";
@@ -693,10 +596,7 @@
           this.getTableData();
         }
       },
-      changeCheckBox() {
+      /*changeAssetTypeCheckBox() {
-        this.assetClick = true;
-      },
-      changeAssetTypeCheckBox() {
         if(this.assetTypeCheckList && this.assetTypeCheckList.length > 0){
           let assetTypeIds = this.assetTypeCheckList.join(',');
           this.pageObj.typeIds=assetTypeIds;
@@ -723,7 +623,7 @@
           this.pageObj.pingStates = '';
         }
         this.getTableData();
-      },
+      },*/
       pageNo(val) {
         this.pageObj.pageNo = val;
         this.getTableData()
@@ -751,11 +651,11 @@
         }
       },
       flushData() {
-        Promise.all([this.getVendorData(), this.getAssetTypeData(), this.getDcData()]).then(response => {
+        Promise.all([this.getLeftMenuList()]).then(response => {
           this.getTableData();
         });
       },
-      closeAllPop:function(){
+      closeAllPop() {
         this.$refs.idcConfigBox.forEach((item) => {
           item.show(false);
         });
@@ -856,8 +756,6 @@
         }
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
-      /*}
-        this.getAssetData();*/
       },
       // 获取左侧菜单数据
       getLeftMenuList(){
@@ -884,24 +782,19 @@
     },
     mounted() {
       //初始化数据
-      /*Promise.all([this.getVendorData(), this.getAssetTypeData(), this.getUserData(), this.getDcData()]).then(response => {
-        this.getTableData();
-      });*/
       this.getUserData();
-      this.getLeftMenuList().then(() => {
       this.getTableData();
-      });
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
       if (pageSize != 'undefined' && pageSize != null) {
         this.pageObj.pageSize = pageSize
       }
       this.$nextTick(() => {
-        //左侧dc列表初始选中状态
+        /*//左侧dc列表初始选中状态
         if (this.$store.state.assetData.selectedData.length > 0) {
           this.checkList = [];
           this.checkList = this.$store.state.assetData.selectedData;
-        }
+        }*/
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
@@ -941,6 +834,10 @@
           }
         }
       }
+      bus.$on("asset-filter-change", (column, content) => {
+        this.pageObj[column] = content;
+        this.getTableData();
+      });
       this.tools.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
     },
     destroyed() {
@@ -953,17 +850,6 @@
   .asset {
     height: 100%;
   }
-  .tab-input-square {
-    border: 1px solid #606266;
-    height: 22px;
-    width: 50px;
-    border-radius: 3px;
-    text-align: center;
-    line-height: 20px;
-  }
-  .tab-input-square-high {
-    border: 1px solid #1166bb;
-  }
   /deep/ .el-table .cell.el-tooltip{
     min-width: 88px;
   }
@@ -975,9 +861,7 @@
   .link{
     position: relative;
   }
-  /deep/ .el-badge__content{
+
-    width: 15px;
-  }
   .mark{
     vertical-align: middle;
     display: inline-flex;

nezha-fronted/src/components/page/dashboard/explore/explore.vue

@@ -185,7 +185,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
 
     </div>
     <transition name="right-box">
-      <chart-box v-if="rightBox.show" :chart="chart" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{id: -1, name: ''}"></chart-box>
+      <chart-box v-if="rightBox.show" :chart="chart" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{id: -1, name: '', type: 'dashboard'}"></chart-box>
     </transition>
     <element-set
       :allowed-all="true"

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

@@ -20,7 +20,7 @@
 </style>
 <template>
   <div class="project">
-    <template v-show="pageType == 'endpoint'">
+    <template v-if="pageType == 'endpoint'">
       <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
         <div class="main-modal"></div>
         <div class="top-tools" v-show="bottomBox.mainResizeShow">
@@ -114,7 +114,7 @@
         </div>
       </div>
     </template>
-    <template v-show="pageType == 'project'">
+    <template v-else-if="pageType == 'project'">
       <panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
     </template>
     <transition name="el-zoom-in-bottom">
@@ -256,7 +256,7 @@
         currentProjectTitle:'',
         moduleList: [],
         projectList: [],
-        pageType:'',//project endpoint
+        pageType: 'project', //project endpoint
         currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
         module: {}, //编辑的module
         blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
@@ -376,13 +376,10 @@
           return item.project.id == projectId;
         })
       },
-      detailProject(event, project) {
+      detailProject(project) {
         this.pageType = 'project';
-        if(event) {
         if(project) {
           this.currentProject = project;
-          }
-        } else {
           this.currentProjectTitle = project.id + "";
         }
         this.currentModule = {};
@@ -679,34 +676,20 @@
       setTimeout(() => {
         this.ready = true;
       }, 300);
-      bus.$on("project-pageType", pageType => {
+      bus.$on("project-page-type", pageType => {
         this.pageType = pageType;
       });
-      this.$nextTick(() => {
+      bus.$on("current-project-change", project => {
-        //绑定滚动条事件，控制top按钮
+        this.currentProject = project;
-        let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", () => {
-            if (el._ps_.scrollbarYTop > 50) {
-              this.tools.showTopBtn = true;
-            } else {
-              this.tools.showTopBtn = false;
-            }
       });
-
+      bus.$on("current-module-change", module => {
-          el.addEventListener("mouseenter", () => {
+        this.currentModule = module;
-            this.tools.tableHover = true;
-          });
-          el.addEventListener("mouseleave", () => {
-            this.tools.tableHover = false;
-          });
-        }
       });
       //resize时刷新左侧列表滚动条
       let vm = this;
       window.onresize = function() {
         vm.$refs.leftScrollbar.update();
-      }
+      };
 
       this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
@@ -714,7 +697,6 @@
       this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.endpointTableTitle;
-
     },
     computed: {
       projectListChange() {
@@ -726,9 +708,12 @@
       endpointListChange() {
         return this.$store.state.endpointListChange;
       },
-      /*currentProjectChange() {
+      currentProjectChange() {
         return this.$store.state.currentProject;
-      },*/
+      },
+      currentModuleChange() {
+        return this.$store.state.currentModule;
+      },
       itemTip() {
         return function(id, content, ready) {
           let className = "item-tip-show";
@@ -757,19 +742,29 @@
       endpointListChange(n) {
         this.getEndpointTableData();
       },
-      /*currentProjectChange: {
+      pageType(n) {
-        immediate:true,
+        if (n == 'endpoint') {
-        handler(n, o) {
+          this.$nextTick(() => {
-          if (n.id != this.currentProject.id) {
+            //绑定滚动条事件，控制top按钮
-            this.currentProject = this.projectList.find(p => {
+            let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
-              return p.id == n.id;
+            if (el._ps_) {
-            });
+              el.addEventListener("ps-scroll-y", () => {
-            this.detailProject(null, this.currentProject);
+                if (el._ps_.scrollbarYTop > 50) {
+                  this.tools.showTopBtn = true;
+                } else {
+                  this.tools.showTopBtn = false;
+                }
+              });
+
+              el.addEventListener("mouseenter", () => {
+                this.tools.tableHover = true;
+              });
+              el.addEventListener("mouseleave", () => {
+                this.tools.tableHover = false;
+              });
+            }
+          });
         }
-        },
-      },*/
-      currentProject(n, o) {
-        this.$store.commit("currentProjectChange", Object.assign({}, n));
       },
       currentModule(n, o) {
         this.endpointPageObj.pageNo = 1;
@@ -986,14 +981,6 @@
   /* end--table*/
 
   /* end--子弹框*/
-  .sub-sidebar-info{
-    padding-top: 0px !important;
-    padding-left: 10px;
-    box-sizing: border-box;
-  }
-  .sub-side-bar-menu-edit{
-    margin-right: 18px;
-  }
 
   .item-tip-hide {
     display: none;
@@ -1071,21 +1058,9 @@
     height: 26px;
     line-height: 26px;
   }
-/* 左侧列表dc 编辑按钮影藏样式*/
-  .hid-div{
-    visibility: hidden;
-  }
-  .sidebar-info-item:hover .hid-div{
-    visibility: visible;
-  }
-  .sidebar-info-sub-item:hover .hid-div{
-    visibility: visible;
-  }
   .metric-tip-icon{
     vertical-align: middle;
-    /*color: #3971BA;*/
     transform: scale(0.6);
-    /*-webkit-transform-origin: left top;*/
     display:inline-block;
   }
   .metirc-tip-list{
@@ -1105,7 +1080,4 @@
   .control-icon-checked{
     color:#666;
   }
-  .project .sidebar-info-item{
-    margin:0px !important;
-  }
 </style>

nezha-fronted/src/store/index.js

@@ -18,6 +18,7 @@ const store = new Vuex.Store({
     dcList: 0, //监听此值，改变则刷新dc列表
     /* 监听对象变化，用于顶部菜单与底部内容的同步 */
     currentProject: {id: "", name: "", remark: ""},
+    currentModule: {id: ""},
     currentAsset: {id: ""},
     projectListChange: 0,
     moduleListChange: 0,
@@ -74,6 +75,9 @@ const store = new Vuex.Store({
     currentProjectChange(state, project) {
       state.currentProject = project;
     },
+    currentModuleChange(state, module) {
+      state.currentModule = module;
+    },
     currentAssetChange(state, asset) {
       state.currentAsset = asset;
     },