From dd7a4ffdff531c751d09fd945769852662c06de7 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 3 Aug 2020 21:33:13 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20VueX=E7=BC=A9=E5=87=8F=E3=80=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=88=E9=83=A8=E5=88=86=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/header.vue          | 140 +++++++++++-------
 .../src/components/common/leftMenu.vue        |  95 +++++++-----
 .../src/components/page/alert/config.vue      |  17 ++-
 .../src/components/page/asset/asset.vue       | 121 +++------------
 .../src/components/page/config/dc.vue         |   8 +-
 .../src/components/page/project/project.vue   | 101 ++++---------
 nezha-fronted/src/store/index.js              |  11 +-
 7 files changed, 210 insertions(+), 283 deletions(-)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 5c6fe5edc..d6cdda6f0 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -165,17 +165,22 @@
     <transition name="right-box">
       <alert-config-box v-if="rightBox.alertRule.show" :alert-rule="editAlertRule" @close="closeAlertRuleRightBox" ref="alertConfigBox"></alert-config-box>
     </transition>
+    <transition name="right-box">
+      <dc-box @close="closeDcBox" :dc="dc" :user-data="userData" @reload="getAssetData" v-if="rightBox.dc.show"></dc-box>
+    </transition>
     <change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
 
 <script>
   import bus from '../../libs/bus';
+  import dcBox from "./rightBox/dcBox"; //dc弹框
   import changePwd from "../page/config/changePwd";
   export default {
     name: "Header",
     components: {
-      'change-password':changePwd,
+      'change-password': changePwd,
+      'dc-box': dcBox,
     },
     data() {
       return {
@@ -188,6 +193,18 @@
         activeItemIndexes: [],
         hoverItemIndex: '',
 
+        dc: {
+          id: '',
+          name: '',
+          location: '',
+          tel: '',
+          principal: '',
+          area: {
+            id: 0,
+            name: ''
+          }
+        },
+        userData: [],
         assetData: [], //顶部菜单asset的下拉内容
 
         //add侧滑相关
@@ -197,6 +214,7 @@
           endpoint: {show: false},
           asset: {show: false},
           alertRule: {show: false},
+          dc: {show: false}
         },
         projectData: [], //顶部菜单project列表中的数据
         editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
@@ -278,22 +296,28 @@
       cli(){
         this.$store.commit('openConsole');
       },
-      jumpTo(data, parentMenu) {
-        localStorage.setItem("nz-parent-menu", parentMenu);
-        localStorage.setItem("nz-menu", "/" + data);
+
+      /**
+       * @param route 路由地址
+       * @param parentMenu 菜单大类
+       * */
+      jumpTo(route, parentMenu) {
+        //通知leftMenu菜单改变了；使用localStorage缓存使得页面重新加载时leftMenu可以取到菜单
         bus.$emit("parent-menu-change", parentMenu);
-        bus.$emit("menu-change", "/" + data);
-        if (data != "asset") {
+        bus.$emit("menu-change", "/" + route);
+        localStorage.setItem("nz-parent-menu", parentMenu);
+        localStorage.setItem("nz-menu", "/" + route);
+
+        if (route != "asset") {
           this.activeItemIndexes = [];
-          this.$store.state.assetData = {selectedData: [], step: 0, type: -1};
         }
         this.$router.push({
-          path: "/" + data,
+          path: "/" + route,
           query: {
             t: +new Date()
           }
         });
-        this.activeIndex = data;
+        this.activeIndex = route;
       },
       getLinkData(){
         this.$get('link').then(response=>{
@@ -337,16 +361,17 @@
           this.rightBox.asset.show = true;
         } else if (item.type == 5) {
           this.rightBox.alertRule.show = true;
+        } else if (item.type == 6) {
+          this.rightBox.dc.show = true;
         }
       },
       jumpToAsset(dc) {
         this.activeItemIndex = dc.id;
-        bus.$emit("header-dc-change", dc.id); //发送给leftMenu
-        this.jumpTo('asset', "assets");
+        bus.$emit("header-dc-change", dc.id); //发送给leftMenu，顶部dc条件改变了
+        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);
@@ -391,34 +416,52 @@
           }
         })
       },
+      getUserData() {
+        return new Promise(resolve => {
+          this.$get('sys/user/list', {pageSize: -1, pageNo: 1}).then(response => {
+            if (response.code === 200) {
+              this.userData = response.data.list;
+            }
+            resolve();
+          });
+        });
+      },
       closeProjectRightBox(refresh) {
         this.rightBox.project.show = false;
         if (refresh) {
-          this.$store.commit("projectListChange");
+          this.getProjectList();
+          bus.$emit("project-list-change");
         }
       },
       closeModuleRightBox(refresh) {
         this.rightBox.module.show = false;
         if (refresh) {
-          this.$store.commit("moduleListChange");
+          bus.$emit("module-list-change");
         }
       },
       closeEndpointRightBox(refresh) {
         this.rightBox.endpoint.show = false;
         if (refresh) {
-          this.$store.commit("endpointListChange");
+          bus.$emit("endpoint-list-change");
         }
       },
       closeAssetRightBox(refresh) {
         this.rightBox.asset.show = false;
         if (refresh) {
-          this.$store.commit("assetListChange");
+          bus.$emit("asset-list-change");
         }
       },
       closeAlertRuleRightBox(refresh) {
         this.rightBox.alertRule.show = false;
         if (refresh) {
-          this.$store.commit("alertConfigListChange");
+          bus.$emit("alert-rule-list-change");
+        }
+      },
+      closeDcBox(refresh) {
+        this.rightBox.dc.show = false;
+        if (refresh) {
+          this.getAssetData();
+          bus.$emit("dc-list-change");
         }
       },
       toEditProject(p) {
@@ -446,61 +489,44 @@
       cancel() {
         this.activeIndex = this.$route.path.slice(1, this.$route.path.length);
       },
+
+      initEvent() {
+        bus.$on("menu-change", menu => {
+          this.activeIndex = menu.split("/")[1];
+        });
+        bus.$on('login', () => {
+          this.username = sessionStorage.getItem("nz-username");
+          this.refreshLang();
+          this.activeIndex = 'overview';
+        });
+        bus.$on("dc-list-change", () => {
+          this.getAssetData();
+        });
+        bus.$on("current-project-change", project => {
+          this.currentProject = project;
+          this.activeItemIndex = project.id;
+        });
+        if (window.history && window.history.pushState) {
+          history.pushState(null, null, document.URL);
+          window.addEventListener('popstate', this.cancel, false);
+        }
+      }
     },
     mounted() {
       this.$i18n.locale = this.language;
       this.getAssetData();
+      this.getUserData();
       this.getProjectList();
       this.getLinkData();
       // 刷新后有高亮
       let activePath = this.$route.path.slice(1);
       this.activeIndex = activePath;
-
-      bus.$on("menu-change", menu => {
-        this.activeIndex = menu.split("/")[1];
-      });
-
-      bus.$on('login', () => {
-        this.username = sessionStorage.getItem("nz-username");
-        this.refreshLang();
-        this.activeIndex = 'overview';
-      });
-
-      if (window.history && window.history.pushState) {
-        history.pushState(null, null, document.URL);
-        window.addEventListener('popstate', this.cancel, false);
-      }
     },
     computed: {
-      projectListChange() {
-        return this.$store.state.projectListChange;
-      },
-      dcListChange() {
-        return this.$store.state.dcListChange;
-      },
-      currentProjectChange(){
-        return this.$store.state.currentProject;
-      },
       linkData(){
         return this.$store.getters.getLinkData;
       },
     },
-    watch: {
-      projectListChange(n) {
-        this.getProjectList();
-      },
-      dcListChange(n) {
-        this.getAssetData();
-      },
-      currentProjectChange(n, o) {
-        if (n.id != this.currentProject.id) {
-          this.currentProject = this.projectData.find(p => {
-            return p.id == n.id;
-          });
-          this.activeItemIndex = n.id;
-        }
-      },
-    },
     destroyed() {
       window.removeEventListener('popstate', this.cancel, false);
     }
diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue
index b70263517..3967f73bb 100644
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -116,6 +116,10 @@
     </div><div class="content-right right-slot" :class="{'right-slot-open': isShrink}">
       <router-view/>
     </div>
+
+    <transition name="right-box">
+      <module-box v-if="rightBox.module.show" :current-project="currentProject" :module="module" @close="closeModuleRightBox" ref="moduleBox"></module-box>
+    </transition>
   </div>
 </template>
 
@@ -143,6 +147,7 @@
           blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
           currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
           ready: false,
+          rightBox: {module: {show: false}},
 
           //asset相关
           activeType: 'dataCenter',
@@ -208,12 +213,6 @@
             return "";
           }
         },
-        projectListChange() {
-          return this.$store.state.projectListChange;
-        },
-        moduleListChange() {
-          return this.$store.state.moduleListChange;
-        },
         currentProjectChange() {
           return this.$store.state.currentProject;
         },
@@ -226,15 +225,6 @@
             this.active = n;
           }
         },
-        projectListChange(n) {
-          this.getProjectList();
-        },
-        moduleListChange(n) {
-          this.getModuleList();
-        },
-        endpointListChange(n) {
-          this.getEndpointTableData();
-        },
         currentProjectChange: {
           immediate: true,
           handler(n, o) {
@@ -247,13 +237,14 @@
           },
         },
         dcCheckList(n, o) {
-          setTimeout(() => {
+          this.$store.commit("currentDcListChange", n);
+        /*  setTimeout(() => {
             if (n.length > 0 ) {
               bus.$emit("asset-filter-change", "idcIds", n.join(','));
             } else {
               bus.$emit("asset-filter-change", "idcIds", "");
             }
-          }, 100);
+          }, 100);*/
         },
         currentProject(n, o) {
           bus.$emit("current-project-change", n); //告知project.vue
@@ -261,12 +252,6 @@
       },
       mounted() {
         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) {
@@ -281,16 +266,7 @@
               this.active = this.menus[this.parentMenu].menu[0].route;
             }
           }
-          bus.$on("parent-menu-change", parentMenu => {
-            this.parentMenu = parentMenu;
-          });
-          bus.$on("menu-change", menu => {
-            this.active = menu;
-          });
-          bus.$on("header-dc-change", dcId => {
-            this.dcCheckList = [dcId];
-            bus.$emit("asset-filter-change", "idcIds", dcId);
-          });
+          this.initEvent(); //注册监听事件
 
           setTimeout(() => {
             this.ready = true;
@@ -354,6 +330,41 @@
             this.$refs.moduleBox.initWalk();
           });*/
         },
+        //弹出module编辑页
+        editModule(module) {
+          this.module = JSON.parse(JSON.stringify(module));
+          if (!this.module.paramObj) {
+            this.$set(this.module, 'paramObj', []);
+          }
+          if (this.module.snmpParam) {
+            this.initSnmpParam(this.module);
+          }
+          this.rightBox.module.show = true;
+          this.$nextTick(() => {
+            this.$refs.moduleBox.initWalk();
+          });
+        },
+        closeModuleRightBox(refresh) {
+          this.rightBox.module.show = false;
+          if (refresh) {
+            this.getModuleList();
+          }
+        },
+        initSnmpParam(module) {
+          this.$set(module, 'walk', []);
+          this.$set(module, 'version', '');
+          this.$set(module, 'max_repetitions', '');
+          this.$set(module, 'retries', '');
+          this.$set(module, 'timeout', '');
+          this.$set(module, 'community', '');
+          this.$set(module, 'username', '');
+          this.$set(module, 'security_level', '');
+          this.$set(module, 'password', '');
+          this.$set(module, 'auth_protocol', '');
+          this.$set(module, 'priv_protocol', '');
+          this.$set(module, 'priv_password', '');
+          this.$set(module, 'context_name', '');
+        },
         changeCurrentProject(project) {
           localStorage.setItem("nz-current-project", project.id);
           this.$store.commit("currentProjectChange", project);
@@ -371,6 +382,24 @@
           this.changeCurrentModule({id: ""});
         },
 
+        initEvent() {
+          bus.$on("parent-menu-change", parentMenu => {
+            this.parentMenu = parentMenu;
+          });
+          bus.$on("menu-change", menu => {
+            this.active = menu;
+          });
+          bus.$on("header-dc-change", dcId => {
+            this.dcCheckList = [dcId];
+            bus.$emit("asset-filter-change", "idcIds", dcId);
+          });
+          bus.$on("project-list-change", () => {
+            this.getProjectList();
+          });
+          bus.$on("module-list-change", menu => {
+            this.getModuleList();
+          });
+        },
         // 获取asset左侧菜单数据
         getLeftMenuList(){
           return new Promise(resolve => {
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 4acd1097d..336472d65 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -517,16 +517,16 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
-    },
-    computed: {
-      alertConfigListChange() {
-        return this.$store.state.alertConfigListChange;
-      },
+      initEvent() {
+        bus.$on("alert-rule-list-change", () => {
+          this.getTableData();
+        });
+        bus.$on("dc-list-change", () => {
+          this.getTableData();
+        });
+      }
     },
     watch: {
-      alertConfigListChange(n) {
-        this.getTableData();
-      },
       'bottomBox.showSubList': function(n) {
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
@@ -547,6 +547,7 @@
       if (pageSize != 'undefined' && pageSize != null) {
         this.pageObj.pageSize = pageSize
       }
+      this.initEvent();
 
       this.getTableData();
       this.$nextTick(() => {
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 68de93a75..6ec951757 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -349,15 +349,6 @@
           }],
         tableData: [],
 
-        /*dcData: [],
-        dcCheckList: [],
-        assetTypeData: [],
-        assetTypeCheckList: [],
-        vendorData: [],
-        vendorCheckList: [],
-        pingData: [],
-        pingCheckList: [],*/
-
         pageObj: {
           id: '',
           pageNo: 1,
@@ -370,30 +361,14 @@
         assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
       }
     },
-    computed: {
-      assetListChange() {
-        return this.$store.state.assetListChange;
-      },
-      currentAssetChange() {
-        return this.$store.state.currentAsset;
-      },
-    },
     watch: {
-      assetListChange(n) {
-        this.getTableData();
-      },
-      currentAssetChange(n) {
-        this.dcCheckList = [n.id];
-      },
-      dcCheckList(n, o) {
-        setTimeout(()=>{
-          if (n.length > 0 ) {
-            this.pageObj.idcIds = n.join(',');
-          } else {
-            this.pageObj.idcIds = '';
-          }
+      currentDcListChange: {
+        deep: true,
+        immediate: true,
+        handler(n) {
+          this.pageObj.idcIds = n.join(",");
           this.getTableData();
-        }, 50);
+        }
       },
       'bottomBox.showSubList': function(n) {
         let vm = this;
@@ -494,36 +469,6 @@
           }
         });
       },
-      /*getDcData() {
-        return new Promise(resolve => {
-          this.$get('idc').then(response => {
-            if (response.code === 200) {
-              this.dcData = response.data.list;
-            }
-            resolve(this.dcData);
-          });
-        });
-      },
-      getAssetTypeData() {
-        return new Promise(resolve => {
-          this.$get('sys/dict/all?type=assetType').then(response => {
-            if (response.code === 200) {
-              this.assetTypeData = response.data;
-            }
-            resolve(this.assetTypeData);
-          });
-        });
-      },
-      getVendorData() {
-        return new Promise(resolve => {
-          this.$get('sys/dict/all?type=vendor').then(response => {
-            if (response.code === 200) {
-              this.vendorData = response.data;
-            }
-            resolve(this.vendorData);
-          });
-        });
-      },*/
       getUserData() {
         return new Promise(resolve => {
           this.$get('sys/user/list').then(response => {
@@ -596,39 +541,10 @@
           this.getTableData();
         }
       },
-      /*changeAssetTypeCheckBox() {
-        if(this.assetTypeCheckList && this.assetTypeCheckList.length > 0){
-          let assetTypeIds = this.assetTypeCheckList.join(',');
-          this.pageObj.typeIds=assetTypeIds;
-        }else{
-          this.pageObj.typeIds='';
-        }
-        this.getTableData();
-      },
-      changeVendorCheckBox() {
-        if(this.vendorCheckList && this.vendorCheckList.length > 0){
-          let vendorIds = this.vendorCheckList.join(',');
-          this.pageObj.vendorIds = vendorIds;
-
-        }else{
-          this.pageObj.vendorIds = '';
-        }
-        this.getTableData();
-      },
-      changePingCheckBox() {
-        if(this.pingCheckList && this.pingCheckList.length > 0){
-          let pingStates = this.pingCheckList.join(',');
-          this.pageObj.pingStates = pingStates;
-        }else{
-          this.pageObj.pingStates = '';
-        }
-        this.getTableData();
-      },*/
       pageNo(val) {
         this.pageObj.pageNo = val;
         this.getTableData()
-      }
-      ,
+      },
       pageSize(val) {
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
@@ -779,7 +695,19 @@
           });
         });
       },
+      initEvent() {
+        bus.$on("asset-filter-change", (column, content) => {
+          this.pageObj[column] = content;
+          this.getTableData();
+        });
+      }
     },
+    computed: {
+      currentDcListChange() {
+        return this.$store.state.currentDcList;
+      }
+    },
+
     mounted() {
       //初始化数据
       this.getUserData();
@@ -789,12 +717,8 @@
       if (pageSize != 'undefined' && pageSize != null) {
         this.pageObj.pageSize = pageSize
       }
+      this.initEvent();
       this.$nextTick(() => {
-        /*//左侧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_) {
@@ -834,10 +758,7 @@
           }
         }
       }
-      bus.$on("asset-filter-change", (column, content) => {
-        this.pageObj[column] = content;
-        this.getTableData();
-      });
+
       this.tools.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
     },
     destroyed() {
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 8e7c9aad9..dce1278cb 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -349,7 +349,7 @@
         this.rightBox.dc.show = false;
         if (refresh) {
           this.getTableData();
-          this.$store.commit("dcListChange");
+          bus.$emit("dc-list-change");
         }
       },
       closeTrafficBox(refresh) {
@@ -459,6 +459,12 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
+
+      initEvent() {
+        bus.$on("dc-list-change", () => {
+          this.getTableData();
+        });
+      }
     },
     watch: {
       'bottomBox.dc': {
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index d592e4fa6..82906ae70 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -131,9 +131,7 @@
       @tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
-    <transition name="right-box">
-      <module-box v-if="rightBox.module.show" :current-project="currentProject" :module="module" @close="closeModuleRightBox" ref="moduleBox"></module-box>
-    </transition>
+
     <transition name="right-box">
       <add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
     </transition>
@@ -384,12 +382,6 @@
         }
         this.currentModule = {};
       },
-      closeModuleRightBox(refresh) {
-        this.rightBox.module.show = false;
-        if (refresh) {
-          this.getModuleList();
-        }
-      },
       closeAddEndpointRightBox(refresh) {
         this.rightBox.addEndpoint.show = false;
         if (refresh) {
@@ -453,39 +445,6 @@
         this.bottomBox.targetTab = "panel";
         this.bottomBox.showSubList = true;
       },
-      initSnmpParam(module) {
-        this.$set(module, 'walk', []);
-        this.$set(module, 'version', '');
-        this.$set(module, 'max_repetitions', '');
-        this.$set(module, 'retries', '');
-        this.$set(module, 'timeout', '');
-        this.$set(module, 'community', '');
-        this.$set(module, 'username', '');
-        this.$set(module, 'security_level', '');
-        this.$set(module, 'password', '');
-        this.$set(module, 'auth_protocol', '');
-        this.$set(module, 'priv_protocol', '');
-        this.$set(module, 'priv_password', '');
-        this.$set(module, 'context_name', '');
-      },
-      //弹出module编辑页
-      editModule(module) {
-        this.currentModule = JSON.parse(JSON.stringify(module));
-        if (!this.currentModule.paramObj) {
-          this.$set(this.currentModule, 'paramObj', []);
-        }
-        this.module = JSON.parse(JSON.stringify(module));
-        if (!this.module.paramObj) {
-          this.$set(this.module, 'paramObj', []);
-        }
-        if (this.module.snmpParam) {
-          this.initSnmpParam(this.module);
-        }
-        this.rightBox.module.show = true;
-        this.$nextTick(() => {
-          this.$refs.moduleBox.initWalk();
-        });
-      },
       addModule() {
         this.module = this.newModule();
         this.rightBox.module.show = true;
@@ -659,6 +618,26 @@
         }
         this.$set(this.endpointSearchLabel, "orderBy", orderBy);
         this.getEndpointTableData();
+      },
+      initEvent() {
+        bus.$on("project-page-type", pageType => {
+          this.pageType = pageType;
+        });
+        bus.$on("current-project-change", project => {
+          this.currentProject = project;
+        });
+        bus.$on("current-module-change", module => {
+          this.currentModule = module;
+        });
+        bus.$on("project-list-change", () => {
+          this.getProjectList();
+        });
+        bus.$on("module-list-change", menu => {
+          this.getModuleList();
+        });
+        bus.$on("endpoint-list-change", menu => {
+          this.getEndpointTableData();
+        });
       }
     },
     created() {
@@ -676,15 +655,9 @@
       setTimeout(() => {
         this.ready = true;
       }, 300);
-      bus.$on("project-page-type", pageType => {
-        this.pageType = pageType;
-      });
-      bus.$on("current-project-change", project => {
-        this.currentProject = project;
-      });
-      bus.$on("current-module-change", module => {
-        this.currentModule = module;
-      });
+
+      this.initEvent();
+
       //resize时刷新左侧列表滚动条
       let vm = this;
       window.onresize = function() {
@@ -699,21 +672,6 @@
         : this.endpointTableTitle;
     },
     computed: {
-      projectListChange() {
-        return this.$store.state.projectListChange;
-      },
-      moduleListChange() {
-        return this.$store.state.moduleListChange;
-      },
-      endpointListChange() {
-        return this.$store.state.endpointListChange;
-      },
-      currentProjectChange() {
-        return this.$store.state.currentProject;
-      },
-      currentModuleChange() {
-        return this.$store.state.currentModule;
-      },
       itemTip() {
         return function(id, content, ready) {
           let className = "item-tip-show";
@@ -733,15 +691,6 @@
       },
     },
     watch: {
-      projectListChange(n) {
-        this.getProjectList();
-      },
-      moduleListChange(n) {
-        this.getModuleList();
-      },
-      endpointListChange(n) {
-        this.getEndpointTableData();
-      },
       pageType(n) {
         if (n == 'endpoint') {
           this.$nextTick(() => {
@@ -774,7 +723,7 @@
           this.endpointTableData = [];
         }
       },
-      
+
       "bottomBox.showSubList": function(n) {
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js
index df0360ba1..705caee86 100644
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -4,12 +4,6 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 const store = new Vuex.Store({
   state: {
-    assetData:{
-      selectedData: [],
-      step: 0,
-      type: -1  //0: asset  1: header
-    },
-    
     assetForAlertList: 0, //asset页跳转alertList时传递的assetId
 
     assetItemId:''  ,   //复选框ID
@@ -20,6 +14,7 @@ const store = new Vuex.Store({
     currentProject: {id: "", name: "", remark: ""},
     currentModule: {id: ""},
     currentAsset: {id: ""},
+    currentDcList: [],
     projectListChange: 0,
     moduleListChange: 0,
     endpointListChange: 0,
@@ -75,8 +70,8 @@ const store = new Vuex.Store({
     currentProjectChange(state, project) {
       state.currentProject = project;
     },
-    currentModuleChange(state, module) {
-      state.currentModule = module;
+    currentDcListChange(state, dcList) {
+      state.currentDcList = dcList;
     },
     currentAssetChange(state, asset) {
       state.currentAsset = asset;