From f4e13f932dec6d6360be9cb6344dbea95f401fec Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 3 Aug 2020 20:12:20 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-351=20perf:=20=E5=AE=8C=E6=88=90=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E8=8F=9C=E5=8D=95=E6=8A=BD=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |   1 -
 .../src/components/common/header.vue          |  12 +-
 .../src/components/common/leftMenu.vue        | 339 ++++++++++---
 nezha-fronted/src/components/common/login.vue |   2 +
 .../src/components/page/asset/asset.vue       | 448 +++++++-----------
 .../page/dashboard/explore/explore.vue        |   2 +-
 .../src/components/page/project/project.vue   | 110 ++---
 nezha-fronted/src/store/index.js              |   4 +
 8 files changed, 494 insertions(+), 424 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 6d64ae6b3..c62d0c291 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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;
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index d489bbdd8..5c6fe5edc 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/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) {
-        this.activeItemIndex = asset.id;
-        this.$store.commit('currentAssetChange', asset);
+      jumpToAsset(dc) {
+        this.activeItemIndex = dc.id;
+        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');
       },
diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue
index ce8b35f4a..b70263517 100644
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -1,48 +1,113 @@
 <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-info">
-        <template v-if="parentMenu == 'projects'">
-          <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top: 0px;" ref="projectLeft">
-            <el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.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-txt">
-                    <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
+      <div class="sidebar-title too-long-split">
+        <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="currentProject.id + ''" class="left-menu-bg" accordion style="padding-top: 0;" ref="projectLeft">
+              <el-collapse-item v-for="(item, index) in projectList" :key="item.id" :name="item.id + ''">
+                <template slot="title">
+                  <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="">
                         {{item.name}}
                       </span>
-                    </el-popover>
-                    <span v-else>{{item.name}}</span>
-                  </div>
-                </div>
-              </template>
-              <div class="sidebar-info sub-sidebar-info" >
-                <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
-                  <i class="nz-icon nz-icon-create-square"></i>
-                </div>
-                <template v-else>
-                  <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
-                    <div :id="`module-${module.id}`" class="item-tip">
-                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
-                      <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
-                      <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
+                      </el-popover>
+                      <span v-else>{{item.name}}</span>
                     </div>
                   </div>
                 </template>
-              </div>
-            </el-collapse-item>
-          </el-collapse>
-        </template>
-        <template v-else-if="parentMenu == 'assets'">
-
-        </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>
+                <div class="sidebar-info sub-sidebar-info" >
+                  <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
+                    <i class="nz-icon nz-icon-create-square"></i>
+                  </div>
+                  <template v-else>
+                    <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
+                      <div :id="`module-${module.id}`" class="item-tip">
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
+                        <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
+                        <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </el-collapse-item>
+            </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 => {
-                return p.id == n.id;
-              });
-              if (this.currentProject && this.currentProject.id) {
-                this.detailProject(null, this.currentProject);
+              this.currentProject = n;
+              if (this.currentProject && this.currentProject.id && this.showProjectPanel) {
+                this.detailProject(this.currentProject);
               }
             }
           },
         },
-        currentProject(n, o) {
-          bus.$emit("current-project-change", n);
+        dcCheckList(n, o) {
+          setTimeout(() => {
+            if (n.length > 0 ) {
+              bus.$emit("asset-filter-change", "idcIds", n.join(','));
+            } else {
+              bus.$emit("asset-filter-change", "idcIds", "");
+            }
+          }, 100);
         },
-        currentModule(n, o) {
-          bus.$emit("current-module-change", n);
+        currentProject(n, o) {
+          bus.$emit("current-project-change", n); //告知project.vue
         },
       },
       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') {
-              this.projectList.length > 0 && (this.active = this.projectList[0].name)
-            } else if (this.parentMenu == 'assets') {
-
-            } else {
+            if (this.parentMenu != 'projects' && this.parentMenu != 'assets') {
               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.currentModule = 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;
         },
-        detailProject(event, project) {
-          bus.$emit("project-pageType", "project");
-          if(event) {
-            if(project) {
-              this.currentProject = project;
-            }
-          } else {
-            this.currentProjectTitle = project.id + "";
-          }
-          this.currentModule = {};
+        changeCurrentModule(module) {
+          bus.$emit("current-module-change", module);  //告知project.vue
+          this.currentModule = module;
+        },
+        //与header.vue同步
+        detailProject(project) {
+          this.showProjectPanel = true;
+          this.changeCurrentProject(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 {
+            return false;
+          }
+        },
         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;
     }
   }
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index ac8687c84..db32f9f02 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/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({
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 857f09bae..68de93a75 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,233 +1,162 @@
 <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 class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
+      <div class="main-modal"></div>
+      <div class="top-tools" v-show="bottomBox.mainResizeShow">
+        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
+          <div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input></div>
+          <export-excel
+            export-file-name="asset"
+            export-url="/asset/export"
+            import-url="/asset/import"
+            :params="searchLabel"
+            @afterImport="getTableData"
+          >
+            <template slot="optionZone">
+              <button @click.stop="add" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
+                <i class="nz-icon nz-icon-create-square"></i></button>
+            </template>
+          </export-excel>
         </div>
+        <div class="pagination-top pagination-top-hide display-none"></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">
-            <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-              <div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input></div>
-              <export-excel
-                export-file-name="asset"
-                export-url="/asset/export"
-                import-url="/asset/import"
-                :params="searchLabel"
-                @afterImport="getTableData"
-              >
-                <template slot="optionZone">
-                  <button @click.stop="add" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
-                    <i class="nz-icon nz-icon-create-square"></i></button>
-                </template>
-              </export-excel>
+
+      <el-table
+        class="nz-table"
+        :height="mainTableHeight"
+        style="width: 100%;"
+        :data="tableData"
+        v-scrollBar:el-table="'large'"
+        v-show="bottomBox.mainResizeShow"
+        border
+        v-loading="tools.loading"
+        tooltip-effect="light"
+        ref="assetTable"
+        :cell-class-name="messageStyle"
+        @sort-change="tableDataSort"
+      >
+        <el-table-column
+          :resizable="false"
+          v-for="(item, index) in tools.tablelable"
+          v-if="item.show"
+          :width="item.width"
+          :key="`col_${index}`"
+          :label="item.label"
+          :fixed="item.fixed"
+          :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
+          min-width="110px"
+          :class-name="item.prop == 'option' ? 'content-right-options' : ''"
+          :sortable="sortableShow(item.prop)"
+          :prop="propTitle(item.prop)"
+          :sort-orders="['ascending', 'descending']"
+        >
+          <template slot-scope="scope" :column="item">
+            <div v-if="item.prop=='ID'">
+              <span>{{scope.row.id}}</span>
             </div>
-            <div class="pagination-top pagination-top-hide display-none"></div>
+            <div v-if="item.prop=='assetType'">
+              <span>{{scope.row.model.type.value}}</span>
+            </div>
+            <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
+            <div v-if="item.prop=='HOST'">
+              <span>{{scope.row.host}}</span>
+            </div>
+            <div v-if="item.prop=='state'">
+              <span>{{scope.row.state==1 ? $t('asset.inStock') : $t('asset.notInStock')}}</span>
+            </div>
+          <div v-if="item.prop == 'pingStatus'">
+            <el-popover
+              placement="right"
+              width="200"
+              trigger="hover"
+              :content="formatPingTime(scope.row.pingLastUpdate)">
+              <div slot="reference" style="width: 20px">
+                <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
+              </div>
+            </el-popover>
           </div>
-
-              <el-table
-                class="nz-table"
-                :height="mainTableHeight"
-                style="width: 100%;"
-                :data="tableData"
-                v-scrollBar:el-table="'large'"
-                v-show="bottomBox.mainResizeShow"
-                border
-                v-loading="tools.loading"
-                tooltip-effect="light"
-                ref="assetTable"
-                :cell-class-name="messageStyle"
-                @sort-change="tableDataSort"
-              >
-                <el-table-column
-                  :resizable="false"
-                  v-for="(item, index) in tools.tablelable"
-                  v-if="item.show"
-                  :width="item.width"
-                  :key="`col_${index}`"
-                  :label="item.label"
-                  :fixed="item.fixed"
-                  :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
-                  min-width="110px"
-                  :class-name="item.prop == 'option' ? 'content-right-options' : ''"
-                  :sortable="sortableShow(item.prop)"
-                  :prop="propTitle(item.prop)"
-                  :sort-orders="['ascending', 'descending']"
-                >
-                  <template slot-scope="scope" :column="item">
-                    <div v-if="item.prop=='ID'">
-                      <span>{{scope.row.id}}</span>
-                    </div>
-                    <div v-if="item.prop=='assetType'">
-                      <span>{{scope.row.model.type.value}}</span>
-                    </div>
-                    <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
-                    <div v-if="item.prop=='HOST'">
-                      <span>{{scope.row.host}}</span>
-                    </div>
-                    <div v-if="item.prop=='state'">
-                      <span>{{scope.row.state==1 ? $t('asset.inStock') : $t('asset.notInStock')}}</span>
-                    </div>
-              <div v-if="item.prop == 'pingStatus'">
-                <el-popover
-                  placement="right"
-                  width="200"
-                  trigger="hover"
-                  :content="formatPingTime(scope.row.pingLastUpdate)">
-                  <div slot="reference" style="width: 20px">
-                    <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
-                  </div>
-                </el-popover>
-              </div>
-              <template v-if="item.prop=='Module'">
-                <span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span>
-              </template>
-              <template v-if="item.prop=='Alert'">
-                <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
-                  <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
-                    {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
-                      <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
-                    {{' ' + $t('overall.active')}}
-                  </span>
-                </el-tooltip>
-              </template>
-              <div v-if="item.prop=='dataCenter'">
-                <span  >{{scope.row.idc.name}}</span>
-              </div>
-              <template v-if="item.prop=='cabinet'">
-                <span v-if="scope.row.cabinet && scope.row.cabinet != '--'">{{returnData(scope.row.cabinet).name}}</span>
-                <span v-else >{{returnData(scope.row.cabinet)}}</span>
-              </template>
-              <div v-if="item.prop=='model'">
-                <span>{{scope.row.model.name}}</span>
-              </div>
-              <div v-if="item.prop=='vendor'">
-                <span>{{scope.row.model.vendor.value}}</span>
-              </div>
-              <div v-if="item.prop=='purchaseDate'">
-                <span>{{returnData(scope.row.purchaseDate)}}</span>
-              </div>
-              <div v-if="item.prop=='principal'">
-                <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
-              </div>
-              <div v-if="item.prop=='tel'">
-                <span>{{scope.row.idc.tel}}</span>
-              </div>
-              <template v-if="item.prop == 'option'">
-                <span :title="$t('overall.view')" @click.stop="detail(scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
-                  class="el-icon-view"></i>
-                </span>
-                  &nbsp;
-                  <span :title="$t('overall.edit')" @click.stop="edit(scope.row)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
-                    class="nz-icon nz-icon-edit"></i>
-                </span>
-                  &nbsp;
-                  <span :title="$t('overall.delete')" @click.stop="del(scope.row)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
-                    class="el-icon-delete"></i>
-                </span>
-                  &nbsp;
-                  <el-dropdown trigger="hover" @command="cli">
-                  <span title="CLI" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
-                    class="nz-icon nz-icon-cli" :class="{'gray-filter': !scope.row.accounts || scope.row.accounts.length == 0}"></i>
-                  </span>
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item v-for="(account, index) in scope.row.accounts" v-if="account && account.protocol != 'SNMP'" :key="index" :command="[scope.row.id ,scope.row.host, account]">{{account.protocol}}</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-
-                </template>
-              </template>
-            </el-table-column>
-            <el-table-column width="28" fixed="right" :resizable="false">
-              <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
+          <template v-if="item.prop=='Module'">
+            <span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span>
+          </template>
+          <template v-if="item.prop=='Alert'">
+            <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
+              <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
+                {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
+                  <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
+                {{' ' + $t('overall.active')}}
               </span>
-              </template>
-              <template v-slot="scope">
-                <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-            <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+            </el-tooltip>
+          </template>
+          <div v-if="item.prop=='dataCenter'">
+            <span  >{{scope.row.idc.name}}</span>
           </div>
-        </div>
-        <transition name="el-zoom-in-bottom">
-          <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.asset" :isFullScreen="bottomBox.isFullScreen" :from="'asset'" :targetTab.sync="bottomBox.targetTab" :detail="bottomBox.assetDetail"
-                      @reload="getTableData"
-                      @closeSubList="bottomBox.showSubList = false"
-                      @fullScreen="fullScreen"
-                      @exitFullScreen="exitFullScreen"
-                      @listResize="listResize" ></bottom-box>
-        </transition>
+          <template v-if="item.prop=='cabinet'">
+            <span v-if="scope.row.cabinet && scope.row.cabinet != '--'">{{returnData(scope.row.cabinet).name}}</span>
+            <span v-else >{{returnData(scope.row.cabinet)}}</span>
+          </template>
+          <div v-if="item.prop=='model'">
+            <span>{{scope.row.model.name}}</span>
+          </div>
+          <div v-if="item.prop=='vendor'">
+            <span>{{scope.row.model.vendor.value}}</span>
+          </div>
+          <div v-if="item.prop=='purchaseDate'">
+            <span>{{returnData(scope.row.purchaseDate)}}</span>
+          </div>
+          <div v-if="item.prop=='principal'">
+            <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
+          </div>
+          <div v-if="item.prop=='tel'">
+            <span>{{scope.row.idc.tel}}</span>
+          </div>
+          <template v-if="item.prop == 'option'">
+            <span :title="$t('overall.view')" @click.stop="detail(scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
+              class="el-icon-view"></i>
+            </span>
+              &nbsp;
+              <span :title="$t('overall.edit')" @click.stop="edit(scope.row)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
+                class="nz-icon nz-icon-edit"></i>
+            </span>
+              &nbsp;
+              <span :title="$t('overall.delete')" @click.stop="del(scope.row)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
+                class="el-icon-delete"></i>
+            </span>
+              &nbsp;
+              <el-dropdown trigger="hover" @command="cli">
+              <span title="CLI" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
+                class="nz-icon nz-icon-cli" :class="{'gray-filter': !scope.row.accounts || scope.row.accounts.length == 0}"></i>
+              </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item v-for="(account, index) in scope.row.accounts" v-if="account && account.protocol != 'SNMP'" :key="index" :command="[scope.row.id ,scope.row.host, account]">{{account.protocol}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column width="28" fixed="right" :resizable="false">
+          <template slot="header" slot-scope="scope">
+          <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+            <i class="nz-icon nz-icon-gear"></i>
+          </span>
+          </template>
+          <template v-slot="scope">
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
+        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
-    </left-menu>
+    </div>
+    <transition name="el-zoom-in-bottom">
+      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.asset" :isFullScreen="bottomBox.isFullScreen" :from="'asset'" :targetTab.sync="bottomBox.targetTab" :detail="bottomBox.assetDetail"
+                  @reload="getTableData"
+                  @closeSubList="bottomBox.showSubList = false"
+                  @fullScreen="fullScreen"
+                  @exitFullScreen="exitFullScreen"
+                  @listResize="listResize" ></bottom-box>
+    </transition>
     <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() {
-        this.assetClick = true;
-      },
-      changeAssetTypeCheckBox() {
+      /*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();
-      });
+      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;
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index e72720866..e4fc0d4d9 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/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"
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index ada026ba1..d592e4fa6 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/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 {
+        if(project) {
+          this.currentProject = project;
           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(() => {
-        //绑定滚动条事件，控制top按钮
-        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;
-            }
-          });
-
-          el.addEventListener("mouseenter", () => {
-            this.tools.tableHover = true;
-          });
-          el.addEventListener("mouseleave", () => {
-            this.tools.tableHover = false;
-          });
-        }
+      bus.$on("current-project-change", project => {
+        this.currentProject = project;
+      });
+      bus.$on("current-module-change", module => {
+        this.currentModule = module;
       });
       //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: {
-        immediate:true,
-        handler(n, o) {
-          if (n.id != this.currentProject.id) {
-            this.currentProject = this.projectList.find(p => {
-              return p.id == n.id;
-            });
-            this.detailProject(null, this.currentProject);
-          }
-        },
-      },*/
-      currentProject(n, o) {
-        this.$store.commit("currentProjectChange", Object.assign({}, n));
+      pageType(n) {
+        if (n == 'endpoint') {
+          this.$nextTick(() => {
+            //绑定滚动条事件，控制top按钮
+            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;
+                }
+              });
+
+              el.addEventListener("mouseenter", () => {
+                this.tools.tableHover = true;
+              });
+              el.addEventListener("mouseleave", () => {
+                this.tools.tableHover = false;
+              });
+            }
+          });
+        }
       },
       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>
diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js
index 631685a1c..df0360ba1 100644
--- a/nezha-fronted/src/store/index.js
+++ b/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;
     },