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

feat: 没有数据时panel、module、project、asset处理

Browse Source
This commit is contained in:
chenjinsong
2020-05-13 19:10:01 +08:00
parent 2ee68afe2c
commit c8ebbae234
4 changed files with 112 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -469,6 +469,9 @@ li{
margin: 0 0 12px;
display: block;
}
.content-left .sidebar-info-item-add {
padding-left: calc(50% - 14px);
}
.content-left .sidebar-info-item.el-checkbox {
padding: 0;
}

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

@@ -15,9 +15,9 @@
</el-menu-item>
<el-submenu index="0" popper-class="nz-submenu" class="icon-menu-item">
<template slot="title">
<div class="menu-icon-create ">
<i class="nz-icon-create-square nz-icon" ></i>
</div>
<div class="menu-icon-create ">
<i class="nz-icon-create-square nz-icon" ></i>
</div>
</template>
<template v-for="(item, index) in createMenu">
<el-menu-item :index="'0-' + index">
@@ -49,29 +49,35 @@
<el-submenu index="2" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpToProject(projectData[0], 0)" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
<div v-if="projectData.length == 0">{{$t('overall.project')}}</div>
<div v-else @click="jumpToProject(projectData[0], 0)" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
</template>
<template v-for="(item, index) in projectData">
<el-menu-item :index="'2-' + index">
<!-- <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item.id)}">-->
<div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" >
<span class="too-long-split" style="width: 135px;">{{item.name}}</span>
<div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="nz-icon nz-icon-edit"></i></div>
</div>
</el-menu-item>
<template>
<el-menu-item v-if="projectData.length == 0" index="2-0"><span @click="createBox({type: 1})" class="header-dropdown-add"><i class="nz-icon nz-icon-create-square"></i></span></el-menu-item>
<template v-else>
<el-menu-item :index="'2-' + index" v-for="(item, index) in projectData">
<div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" >
<span class="too-long-split" style="width: 135px;">{{item.name}}</span>
<div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="nz-icon nz-icon-edit"></i></div>
</div>
</el-menu-item>
</template>
</template>
</el-submenu>
<el-submenu index="3" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpTo('asset')" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
<div v-if="projectData.length == 0">{{$t('overall.asset')}}</div>
<div v-else @click="jumpTo('asset')" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
</template>
<template v-for="(item, index) in assetData">
<el-menu-item :index="'3-' + index">
<!-- <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">-->
<div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
<span class="too-long-split" style="width: 130px;">{{item.name}}</span>
</div>
</el-menu-item>
<template>
<el-menu-item v-if="assetData.length == 0" index="3-0"><span @click="createBox({type: 4})" class="header-dropdown-add"><i class="nz-icon nz-icon-create-square"></i></span></el-menu-item>
<template v-else>
<el-menu-item :index="'3-' + index" v-for="(item, index) in assetData">
<div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
<span class="too-long-split" style="width: 130px;">{{item.name}}</span>
</div>
</el-menu-item>
</template>
</template>
</el-submenu>
<el-submenu index="4-0" popper-class="nz-submenu">
@@ -599,6 +605,10 @@
min-width: 50px !important;
/*margin-right:20px;*/
}
.header-dropdown-add {
display: block;
text-align: center;
}
.header .vertical-line{
display:inline-block;
border-left:solid 1px white;

120
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -11,76 +11,68 @@
</div>
<div slot="content-right" class="slot-content">
<div class="top-tools">
<div class="top-tool-main-left">
<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown>
<el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="">
<el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
<el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
</el-row>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
<el-dropdown-item v-for="item in panelData" :key="item.id+1"
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
<!--{{item.name}}-->
<el-row :gutter="10" class="panel-list-width" >
<el-col :span="19" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
<el-col :span="2"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="2"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
</el-row>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="top-tool-main-left" v-if="panelData.length == 0" style="margin-left: 10px;">
<button @click="toAdd" class="nz-btn nz-btn-style-light nz-btn-size-small">{{$t("dashboard.panel.createPanelTitleSec")}}</button>
</div>
<div class="top-tool-main-right">
<div class="top-tool-search relative-position margin-r-20">
<el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput" @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable >
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
</el-input>
<template v-else>
<div class="top-tool-main-left">
<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown>
<el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="">
<el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
<el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
</el-row>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
<el-dropdown-item v-for="item in panelData" :key="item.id+1"
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
<!--{{item.name}}-->
<el-row :gutter="10" class="panel-list-width" >
<el-col :span="19" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
<el-col :span="2"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="2"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
</el-row>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="panel-calendar margin-r-20">
<div class="block">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
<!--
<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
:picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')" align="right">
</el-date-picker>
-->
<div class="top-tool-main-right">
<div class="top-tool-search relative-position margin-r-20">
<el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput" @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable >
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
</el-input>
</div>
</div>
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
</button><el-popover
v-model="visible" placement="bottom-start" width="200" trigger="click">
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
@click="selectInterval(i.value)">
{{i.name}}
</li>
</ul>
<button type="button" style="border-radius: 0 4px 4px 0"
class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
<i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
<div class="panel-calendar margin-r-20">
<div class="block">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
</div>
</div>
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
</button><el-popover
v-model="visible" placement="bottom-start" width="200" trigger="click">
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
@click="selectInterval(i.value)">
{{i.name}}
</li>
</ul>
<button type="button" style="border-radius: 0 4px 4px 0"
class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
<i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
</button>
</el-popover>
</div>
<button @click="toAddChart" :title="$t('overall.createChart')"
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</el-popover>
</div>
<!-- 2020-02-14 使用普通搜索框-->
<!-- <div class="top-tool-search">-->
<!-- <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>-->
<!-- </div>-->
<button @click="toAddChart" :title="$t('overall.createChart')"
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</template>
</div>
<div class="table-list" id="tableList">
<el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">

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

@@ -58,15 +58,20 @@
</div>
</template>
<div class="sidebar-info sub-sidebar-info" >
<div v-for="module in getProjectModule(item.id)" class="sidebar-info-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(module)" :id="'project-module-'+module.id">
<div class="sidebar-info-item-txt">
<el-popover v-if="module.name.length > 16" trigger="hover" placement="top-start" :content="module.name" >
<span slot="reference">{{module.name}}</span>
</el-popover>
<span v-else>{{module.name}}</span>
</div>
<div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="toEditModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
<div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="toAddModule">
<i class="nz-icon nz-icon-create-square"></i>
</div>
<template v-else>
<div v-for="module in getProjectModule(item.id)" class="sidebar-info-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(module)" :id="'project-module-'+module.id">
<div class="sidebar-info-item-txt">
<el-popover v-if="module.name.length > 16" trigger="hover" placement="top-start" :content="module.name" >
<span slot="reference">{{module.name}}</span>
</el-popover>
<span v-else>{{module.name}}</span>
</div>
<div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="toEditModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
</div>
</template>
</div>
</el-collapse-item>
</el-collapse>
@@ -446,6 +451,7 @@
})
},
getProjectModule:function(projectId){
//return [];
let moduleList=Object.assign([],this.moduleList);
return moduleList.filter((item,index)=>{
return item.project.id==projectId;
@@ -570,6 +576,13 @@
this.$refs.moduleBox.initWalk();
});
},
toAddModule() {
this.editModule = {id: '', type: '', name: '', project: this.currentProject, port: '', path: '', param: '', paramObj: [], snmpParam: ''};
this.rightBoxHandler(2);
this.$nextTick(() => {
this.$refs.moduleBox.initWalk();
});
},
//asset弹框控制
/*tabControl(data) {
@@ -1042,7 +1055,8 @@
/* end--子弹框*/
.sub-sidebar-info{
padding-top: 0px !important;
margin-left: 10px;
padding-left: 10px;
box-sizing: border-box;
}
.sub-side-bar-menu-edit{
margin-right: 18px;