gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: VueX缩减、优化（部分）

Browse Source
This commit is contained in:
chenjinsong
2020-08-03 21:33:13 +08:00
parent f4e13f932d
commit dd7a4ffdff
7 changed files with 210 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
nezha-fronted/src/components/common/header.vue
View File

@@ -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,
'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);
},
},
mounted() {
this.$i18n.locale = this.language;
this.getAssetData();
this.getProjectList();
this.getLinkData();
// 刷新后有高亮
let activePath = this.$route.path.slice(1);
this.activeIndex = activePath;
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;
},
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);
}

95
nezha-fronted/src/components/common/leftMenu.vue
View File

@@ -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 => {

17
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -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(() => {

119
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -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) {
currentDcListChange: {
deep: true,
immediate: true,
handler(n) {
this.pageObj.idcIds = n.join(",");
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 = '';
}
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() {

8
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -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': {

99
nezha-fronted/src/components/page/project/project.vue
View File

@@ -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(() => {

11
nezha-fronted/src/store/index.js
View File

@@ -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;