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

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

Browse Source
This commit is contained in:
chenjinsong
2020-08-03 20:12:20 +08:00
parent e44148b381
commit f4e13f932d
8 changed files with 494 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/assets/stylus/main.scss
View File

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

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

@@ -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');
},

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

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

2
nezha-fronted/src/components/common/login.vue
View File

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

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

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

2
nezha-fronted/src/components/page/dashboard/explore/explore.vue
View File

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

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

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

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

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