perf: VueX缩减、优化(部分)
This commit is contained in:
@@ -165,17 +165,22 @@
|
|||||||
<transition name="right-box">
|
<transition name="right-box">
|
||||||
<alert-config-box v-if="rightBox.alertRule.show" :alert-rule="editAlertRule" @close="closeAlertRuleRightBox" ref="alertConfigBox"></alert-config-box>
|
<alert-config-box v-if="rightBox.alertRule.show" :alert-rule="editAlertRule" @close="closeAlertRuleRightBox" ref="alertConfigBox"></alert-config-box>
|
||||||
</transition>
|
</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>
|
<change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import bus from '../../libs/bus';
|
import bus from '../../libs/bus';
|
||||||
|
import dcBox from "./rightBox/dcBox"; //dc弹框
|
||||||
import changePwd from "../page/config/changePwd";
|
import changePwd from "../page/config/changePwd";
|
||||||
export default {
|
export default {
|
||||||
name: "Header",
|
name: "Header",
|
||||||
components: {
|
components: {
|
||||||
'change-password':changePwd,
|
'change-password': changePwd,
|
||||||
|
'dc-box': dcBox,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -188,6 +193,18 @@
|
|||||||
activeItemIndexes: [],
|
activeItemIndexes: [],
|
||||||
hoverItemIndex: '',
|
hoverItemIndex: '',
|
||||||
|
|
||||||
|
dc: {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
location: '',
|
||||||
|
tel: '',
|
||||||
|
principal: '',
|
||||||
|
area: {
|
||||||
|
id: 0,
|
||||||
|
name: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
userData: [],
|
||||||
assetData: [], //顶部菜单asset的下拉内容
|
assetData: [], //顶部菜单asset的下拉内容
|
||||||
|
|
||||||
//add侧滑相关
|
//add侧滑相关
|
||||||
@@ -197,6 +214,7 @@
|
|||||||
endpoint: {show: false},
|
endpoint: {show: false},
|
||||||
asset: {show: false},
|
asset: {show: false},
|
||||||
alertRule: {show: false},
|
alertRule: {show: false},
|
||||||
|
dc: {show: false}
|
||||||
},
|
},
|
||||||
projectData: [], //顶部菜单project列表中的数据
|
projectData: [], //顶部菜单project列表中的数据
|
||||||
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
|
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
|
||||||
@@ -278,22 +296,28 @@
|
|||||||
cli(){
|
cli(){
|
||||||
this.$store.commit('openConsole');
|
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("parent-menu-change", parentMenu);
|
||||||
bus.$emit("menu-change", "/" + data);
|
bus.$emit("menu-change", "/" + route);
|
||||||
if (data != "asset") {
|
localStorage.setItem("nz-parent-menu", parentMenu);
|
||||||
|
localStorage.setItem("nz-menu", "/" + route);
|
||||||
|
|
||||||
|
if (route != "asset") {
|
||||||
this.activeItemIndexes = [];
|
this.activeItemIndexes = [];
|
||||||
this.$store.state.assetData = {selectedData: [], step: 0, type: -1};
|
|
||||||
}
|
}
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/" + data,
|
path: "/" + route,
|
||||||
query: {
|
query: {
|
||||||
t: +new Date()
|
t: +new Date()
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.activeIndex = data;
|
this.activeIndex = route;
|
||||||
},
|
},
|
||||||
getLinkData(){
|
getLinkData(){
|
||||||
this.$get('link').then(response=>{
|
this.$get('link').then(response=>{
|
||||||
@@ -337,16 +361,17 @@
|
|||||||
this.rightBox.asset.show = true;
|
this.rightBox.asset.show = true;
|
||||||
} else if (item.type == 5) {
|
} else if (item.type == 5) {
|
||||||
this.rightBox.alertRule.show = true;
|
this.rightBox.alertRule.show = true;
|
||||||
|
} else if (item.type == 6) {
|
||||||
|
this.rightBox.dc.show = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
jumpToAsset(dc) {
|
jumpToAsset(dc) {
|
||||||
this.activeItemIndex = dc.id;
|
this.activeItemIndex = dc.id;
|
||||||
bus.$emit("header-dc-change", dc.id); //发送给leftMenu
|
bus.$emit("header-dc-change", dc.id); //发送给leftMenu,顶部dc条件改变了
|
||||||
this.jumpTo('asset', "assets");
|
this.jumpTo("asset", "assets");
|
||||||
},
|
},
|
||||||
jumpToProject(p) {
|
jumpToProject(p) {
|
||||||
this.currentProject = p;
|
this.currentProject = p;
|
||||||
|
|
||||||
this.$store.commit('currentProjectChange', p);
|
this.$store.commit('currentProjectChange', p);
|
||||||
bus.$emit("project-page-type", 'project');
|
bus.$emit("project-page-type", 'project');
|
||||||
localStorage.setItem('nz-current-project', p.id);
|
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) {
|
closeProjectRightBox(refresh) {
|
||||||
this.rightBox.project.show = false;
|
this.rightBox.project.show = false;
|
||||||
if (refresh) {
|
if (refresh) {
|
||||||
this.$store.commit("projectListChange");
|
this.getProjectList();
|
||||||
|
bus.$emit("project-list-change");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeModuleRightBox(refresh) {
|
closeModuleRightBox(refresh) {
|
||||||
this.rightBox.module.show = false;
|
this.rightBox.module.show = false;
|
||||||
if (refresh) {
|
if (refresh) {
|
||||||
this.$store.commit("moduleListChange");
|
bus.$emit("module-list-change");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeEndpointRightBox(refresh) {
|
closeEndpointRightBox(refresh) {
|
||||||
this.rightBox.endpoint.show = false;
|
this.rightBox.endpoint.show = false;
|
||||||
if (refresh) {
|
if (refresh) {
|
||||||
this.$store.commit("endpointListChange");
|
bus.$emit("endpoint-list-change");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeAssetRightBox(refresh) {
|
closeAssetRightBox(refresh) {
|
||||||
this.rightBox.asset.show = false;
|
this.rightBox.asset.show = false;
|
||||||
if (refresh) {
|
if (refresh) {
|
||||||
this.$store.commit("assetListChange");
|
bus.$emit("asset-list-change");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeAlertRuleRightBox(refresh) {
|
closeAlertRuleRightBox(refresh) {
|
||||||
this.rightBox.alertRule.show = false;
|
this.rightBox.alertRule.show = false;
|
||||||
if (refresh) {
|
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) {
|
toEditProject(p) {
|
||||||
@@ -446,61 +489,44 @@
|
|||||||
cancel() {
|
cancel() {
|
||||||
this.activeIndex = this.$route.path.slice(1, this.$route.path.length);
|
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() {
|
mounted() {
|
||||||
this.$i18n.locale = this.language;
|
this.$i18n.locale = this.language;
|
||||||
this.getAssetData();
|
this.getAssetData();
|
||||||
|
this.getUserData();
|
||||||
this.getProjectList();
|
this.getProjectList();
|
||||||
this.getLinkData();
|
this.getLinkData();
|
||||||
// 刷新后有高亮
|
// 刷新后有高亮
|
||||||
let activePath = this.$route.path.slice(1);
|
let activePath = this.$route.path.slice(1);
|
||||||
this.activeIndex = activePath;
|
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: {
|
computed: {
|
||||||
projectListChange() {
|
|
||||||
return this.$store.state.projectListChange;
|
|
||||||
},
|
|
||||||
dcListChange() {
|
|
||||||
return this.$store.state.dcListChange;
|
|
||||||
},
|
|
||||||
currentProjectChange(){
|
|
||||||
return this.$store.state.currentProject;
|
|
||||||
},
|
|
||||||
linkData(){
|
linkData(){
|
||||||
return this.$store.getters.getLinkData;
|
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() {
|
destroyed() {
|
||||||
window.removeEventListener('popstate', this.cancel, false);
|
window.removeEventListener('popstate', this.cancel, false);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -116,6 +116,10 @@
|
|||||||
</div><div class="content-right right-slot" :class="{'right-slot-open': isShrink}">
|
</div><div class="content-right right-slot" :class="{'right-slot-open': isShrink}">
|
||||||
<router-view/>
|
<router-view/>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -143,6 +147,7 @@
|
|||||||
blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
|
blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
|
||||||
currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
|
currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
|
||||||
ready: false,
|
ready: false,
|
||||||
|
rightBox: {module: {show: false}},
|
||||||
|
|
||||||
//asset相关
|
//asset相关
|
||||||
activeType: 'dataCenter',
|
activeType: 'dataCenter',
|
||||||
@@ -208,12 +213,6 @@
|
|||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
projectListChange() {
|
|
||||||
return this.$store.state.projectListChange;
|
|
||||||
},
|
|
||||||
moduleListChange() {
|
|
||||||
return this.$store.state.moduleListChange;
|
|
||||||
},
|
|
||||||
currentProjectChange() {
|
currentProjectChange() {
|
||||||
return this.$store.state.currentProject;
|
return this.$store.state.currentProject;
|
||||||
},
|
},
|
||||||
@@ -226,15 +225,6 @@
|
|||||||
this.active = n;
|
this.active = n;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
projectListChange(n) {
|
|
||||||
this.getProjectList();
|
|
||||||
},
|
|
||||||
moduleListChange(n) {
|
|
||||||
this.getModuleList();
|
|
||||||
},
|
|
||||||
endpointListChange(n) {
|
|
||||||
this.getEndpointTableData();
|
|
||||||
},
|
|
||||||
currentProjectChange: {
|
currentProjectChange: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(n, o) {
|
handler(n, o) {
|
||||||
@@ -247,13 +237,14 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
dcCheckList(n, o) {
|
dcCheckList(n, o) {
|
||||||
setTimeout(() => {
|
this.$store.commit("currentDcListChange", n);
|
||||||
|
/* setTimeout(() => {
|
||||||
if (n.length > 0 ) {
|
if (n.length > 0 ) {
|
||||||
bus.$emit("asset-filter-change", "idcIds", n.join(','));
|
bus.$emit("asset-filter-change", "idcIds", n.join(','));
|
||||||
} else {
|
} else {
|
||||||
bus.$emit("asset-filter-change", "idcIds", "");
|
bus.$emit("asset-filter-change", "idcIds", "");
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);*/
|
||||||
},
|
},
|
||||||
currentProject(n, o) {
|
currentProject(n, o) {
|
||||||
bus.$emit("current-project-change", n); //告知project.vue
|
bus.$emit("current-project-change", n); //告知project.vue
|
||||||
@@ -261,12 +252,6 @@
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).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 cacheParentMenu = localStorage.getItem('nz-parent-menu');
|
||||||
let cacheMenu = localStorage.getItem('nz-menu');
|
let cacheMenu = localStorage.getItem('nz-menu');
|
||||||
if (cacheParentMenu) {
|
if (cacheParentMenu) {
|
||||||
@@ -281,16 +266,7 @@
|
|||||||
this.active = this.menus[this.parentMenu].menu[0].route;
|
this.active = this.menus[this.parentMenu].menu[0].route;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
bus.$on("parent-menu-change", parentMenu => {
|
this.initEvent(); //注册监听事件
|
||||||
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);
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.ready = true;
|
this.ready = true;
|
||||||
@@ -354,6 +330,41 @@
|
|||||||
this.$refs.moduleBox.initWalk();
|
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) {
|
changeCurrentProject(project) {
|
||||||
localStorage.setItem("nz-current-project", project.id);
|
localStorage.setItem("nz-current-project", project.id);
|
||||||
this.$store.commit("currentProjectChange", project);
|
this.$store.commit("currentProjectChange", project);
|
||||||
@@ -371,6 +382,24 @@
|
|||||||
this.changeCurrentModule({id: ""});
|
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左侧菜单数据
|
// 获取asset左侧菜单数据
|
||||||
getLeftMenuList(){
|
getLeftMenuList(){
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
|
|||||||
@@ -517,16 +517,16 @@
|
|||||||
this.$set(this.searchLabel, "orderBy", orderBy);
|
this.$set(this.searchLabel, "orderBy", orderBy);
|
||||||
this.getTableData();
|
this.getTableData();
|
||||||
},
|
},
|
||||||
},
|
initEvent() {
|
||||||
computed: {
|
bus.$on("alert-rule-list-change", () => {
|
||||||
alertConfigListChange() {
|
this.getTableData();
|
||||||
return this.$store.state.alertConfigListChange;
|
});
|
||||||
},
|
bus.$on("dc-list-change", () => {
|
||||||
|
this.getTableData();
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
alertConfigListChange(n) {
|
|
||||||
this.getTableData();
|
|
||||||
},
|
|
||||||
'bottomBox.showSubList': function(n) {
|
'bottomBox.showSubList': function(n) {
|
||||||
let vm = this;
|
let vm = this;
|
||||||
this.$bottomBoxWindow.showSubListWatch(vm, n);
|
this.$bottomBoxWindow.showSubListWatch(vm, n);
|
||||||
@@ -547,6 +547,7 @@
|
|||||||
if (pageSize != 'undefined' && pageSize != null) {
|
if (pageSize != 'undefined' && pageSize != null) {
|
||||||
this.pageObj.pageSize = pageSize
|
this.pageObj.pageSize = pageSize
|
||||||
}
|
}
|
||||||
|
this.initEvent();
|
||||||
|
|
||||||
this.getTableData();
|
this.getTableData();
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|||||||
@@ -349,15 +349,6 @@
|
|||||||
}],
|
}],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
|
|
||||||
/*dcData: [],
|
|
||||||
dcCheckList: [],
|
|
||||||
assetTypeData: [],
|
|
||||||
assetTypeCheckList: [],
|
|
||||||
vendorData: [],
|
|
||||||
vendorCheckList: [],
|
|
||||||
pingData: [],
|
|
||||||
pingCheckList: [],*/
|
|
||||||
|
|
||||||
pageObj: {
|
pageObj: {
|
||||||
id: '',
|
id: '',
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
@@ -370,30 +361,14 @@
|
|||||||
assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
|
assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
assetListChange() {
|
|
||||||
return this.$store.state.assetListChange;
|
|
||||||
},
|
|
||||||
currentAssetChange() {
|
|
||||||
return this.$store.state.currentAsset;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
assetListChange(n) {
|
currentDcListChange: {
|
||||||
this.getTableData();
|
deep: true,
|
||||||
},
|
immediate: true,
|
||||||
currentAssetChange(n) {
|
handler(n) {
|
||||||
this.dcCheckList = [n.id];
|
this.pageObj.idcIds = n.join(",");
|
||||||
},
|
|
||||||
dcCheckList(n, o) {
|
|
||||||
setTimeout(()=>{
|
|
||||||
if (n.length > 0 ) {
|
|
||||||
this.pageObj.idcIds = n.join(',');
|
|
||||||
} else {
|
|
||||||
this.pageObj.idcIds = '';
|
|
||||||
}
|
|
||||||
this.getTableData();
|
this.getTableData();
|
||||||
}, 50);
|
}
|
||||||
},
|
},
|
||||||
'bottomBox.showSubList': function(n) {
|
'bottomBox.showSubList': function(n) {
|
||||||
let vm = this;
|
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() {
|
getUserData() {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
this.$get('sys/user/list').then(response => {
|
this.$get('sys/user/list').then(response => {
|
||||||
@@ -596,39 +541,10 @@
|
|||||||
this.getTableData();
|
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) {
|
pageNo(val) {
|
||||||
this.pageObj.pageNo = val;
|
this.pageObj.pageNo = val;
|
||||||
this.getTableData()
|
this.getTableData()
|
||||||
}
|
},
|
||||||
,
|
|
||||||
pageSize(val) {
|
pageSize(val) {
|
||||||
this.pageObj.pageSize = val;
|
this.pageObj.pageSize = val;
|
||||||
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, 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() {
|
mounted() {
|
||||||
//初始化数据
|
//初始化数据
|
||||||
this.getUserData();
|
this.getUserData();
|
||||||
@@ -789,12 +717,8 @@
|
|||||||
if (pageSize != 'undefined' && pageSize != null) {
|
if (pageSize != 'undefined' && pageSize != null) {
|
||||||
this.pageObj.pageSize = pageSize
|
this.pageObj.pageSize = pageSize
|
||||||
}
|
}
|
||||||
|
this.initEvent();
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
/*//左侧dc列表初始选中状态
|
|
||||||
if (this.$store.state.assetData.selectedData.length > 0) {
|
|
||||||
this.checkList = [];
|
|
||||||
this.checkList = this.$store.state.assetData.selectedData;
|
|
||||||
}*/
|
|
||||||
//绑定滚动条事件,控制top按钮
|
//绑定滚动条事件,控制top按钮
|
||||||
let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
|
let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
|
||||||
if (el._ps_) {
|
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;
|
this.tools.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
|
|||||||
@@ -349,7 +349,7 @@
|
|||||||
this.rightBox.dc.show = false;
|
this.rightBox.dc.show = false;
|
||||||
if (refresh) {
|
if (refresh) {
|
||||||
this.getTableData();
|
this.getTableData();
|
||||||
this.$store.commit("dcListChange");
|
bus.$emit("dc-list-change");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeTrafficBox(refresh) {
|
closeTrafficBox(refresh) {
|
||||||
@@ -459,6 +459,12 @@
|
|||||||
this.$set(this.searchLabel, "orderBy", orderBy);
|
this.$set(this.searchLabel, "orderBy", orderBy);
|
||||||
this.getTableData();
|
this.getTableData();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
initEvent() {
|
||||||
|
bus.$on("dc-list-change", () => {
|
||||||
|
this.getTableData();
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'bottomBox.dc': {
|
'bottomBox.dc': {
|
||||||
|
|||||||
@@ -131,9 +131,7 @@
|
|||||||
@tablelable="tablelabelEmit"
|
@tablelable="tablelabelEmit"
|
||||||
ref="elementset"
|
ref="elementset"
|
||||||
></element-set>
|
></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">
|
<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>
|
<add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
|
||||||
</transition>
|
</transition>
|
||||||
@@ -384,12 +382,6 @@
|
|||||||
}
|
}
|
||||||
this.currentModule = {};
|
this.currentModule = {};
|
||||||
},
|
},
|
||||||
closeModuleRightBox(refresh) {
|
|
||||||
this.rightBox.module.show = false;
|
|
||||||
if (refresh) {
|
|
||||||
this.getModuleList();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
closeAddEndpointRightBox(refresh) {
|
closeAddEndpointRightBox(refresh) {
|
||||||
this.rightBox.addEndpoint.show = false;
|
this.rightBox.addEndpoint.show = false;
|
||||||
if (refresh) {
|
if (refresh) {
|
||||||
@@ -453,39 +445,6 @@
|
|||||||
this.bottomBox.targetTab = "panel";
|
this.bottomBox.targetTab = "panel";
|
||||||
this.bottomBox.showSubList = true;
|
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() {
|
addModule() {
|
||||||
this.module = this.newModule();
|
this.module = this.newModule();
|
||||||
this.rightBox.module.show = true;
|
this.rightBox.module.show = true;
|
||||||
@@ -659,6 +618,26 @@
|
|||||||
}
|
}
|
||||||
this.$set(this.endpointSearchLabel, "orderBy", orderBy);
|
this.$set(this.endpointSearchLabel, "orderBy", orderBy);
|
||||||
this.getEndpointTableData();
|
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() {
|
created() {
|
||||||
@@ -676,15 +655,9 @@
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.ready = true;
|
this.ready = true;
|
||||||
}, 300);
|
}, 300);
|
||||||
bus.$on("project-page-type", pageType => {
|
|
||||||
this.pageType = pageType;
|
this.initEvent();
|
||||||
});
|
|
||||||
bus.$on("current-project-change", project => {
|
|
||||||
this.currentProject = project;
|
|
||||||
});
|
|
||||||
bus.$on("current-module-change", module => {
|
|
||||||
this.currentModule = module;
|
|
||||||
});
|
|
||||||
//resize时刷新左侧列表滚动条
|
//resize时刷新左侧列表滚动条
|
||||||
let vm = this;
|
let vm = this;
|
||||||
window.onresize = function() {
|
window.onresize = function() {
|
||||||
@@ -699,21 +672,6 @@
|
|||||||
: this.endpointTableTitle;
|
: this.endpointTableTitle;
|
||||||
},
|
},
|
||||||
computed: {
|
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() {
|
itemTip() {
|
||||||
return function(id, content, ready) {
|
return function(id, content, ready) {
|
||||||
let className = "item-tip-show";
|
let className = "item-tip-show";
|
||||||
@@ -733,15 +691,6 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
projectListChange(n) {
|
|
||||||
this.getProjectList();
|
|
||||||
},
|
|
||||||
moduleListChange(n) {
|
|
||||||
this.getModuleList();
|
|
||||||
},
|
|
||||||
endpointListChange(n) {
|
|
||||||
this.getEndpointTableData();
|
|
||||||
},
|
|
||||||
pageType(n) {
|
pageType(n) {
|
||||||
if (n == 'endpoint') {
|
if (n == 'endpoint') {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|||||||
@@ -4,12 +4,6 @@ import Vuex from 'vuex'
|
|||||||
Vue.use(Vuex)
|
Vue.use(Vuex)
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
assetData:{
|
|
||||||
selectedData: [],
|
|
||||||
step: 0,
|
|
||||||
type: -1 //0: asset 1: header
|
|
||||||
},
|
|
||||||
|
|
||||||
assetForAlertList: 0, //asset页跳转alertList时传递的assetId
|
assetForAlertList: 0, //asset页跳转alertList时传递的assetId
|
||||||
|
|
||||||
assetItemId:'' , //复选框ID
|
assetItemId:'' , //复选框ID
|
||||||
@@ -20,6 +14,7 @@ const store = new Vuex.Store({
|
|||||||
currentProject: {id: "", name: "", remark: ""},
|
currentProject: {id: "", name: "", remark: ""},
|
||||||
currentModule: {id: ""},
|
currentModule: {id: ""},
|
||||||
currentAsset: {id: ""},
|
currentAsset: {id: ""},
|
||||||
|
currentDcList: [],
|
||||||
projectListChange: 0,
|
projectListChange: 0,
|
||||||
moduleListChange: 0,
|
moduleListChange: 0,
|
||||||
endpointListChange: 0,
|
endpointListChange: 0,
|
||||||
@@ -75,8 +70,8 @@ const store = new Vuex.Store({
|
|||||||
currentProjectChange(state, project) {
|
currentProjectChange(state, project) {
|
||||||
state.currentProject = project;
|
state.currentProject = project;
|
||||||
},
|
},
|
||||||
currentModuleChange(state, module) {
|
currentDcListChange(state, dcList) {
|
||||||
state.currentModule = module;
|
state.currentDcList = dcList;
|
||||||
},
|
},
|
||||||
currentAssetChange(state, asset) {
|
currentAssetChange(state, asset) {
|
||||||
state.currentAsset = asset;
|
state.currentAsset = asset;
|
||||||
|
|||||||
Reference in New Issue
Block a user