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

feat:新功能

Browse Source 
1.dashboard模块：图表标题居中，删除右侧4个按钮，图表标题增加向下箭头，默认不显示，鼠标悬浮显示，将右侧的4个按钮放到图表的下拉列表中
This commit is contained in:
hanyuxia
2020-03-17 19:30:27 +08:00
parent 54173a8bd1
commit 3a4d62ff2b
4 changed files with 151 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
nezha-fronted/src/components/charts/chart-table.scss
View File

@@ -13,6 +13,25 @@
.dialog-tool {
margin-right: 40px;
}
.hidden{
visibility: hidden;
}
.visible{
visibility: visible;
}
.nz-chart-dropdown {
height: 147px;
li {
/*padding: 0 20px !important;*/
padding-left:15px !important;
padding-right:0px !important;
width:140px;
text-align: left;
i {
margin-right: 10px;
}
}
}
.chart-table {
width: calc(100% - 18px);
height: 100%;//calc(100% - 40px);
@@ -22,12 +41,24 @@
border: 1px solid #d8dce1;
padding: 20px 8px 3px;
margin-bottom: 10px;
.table-title {
margin: -3px 0 3px 10px;
.chartTitle {
text-align: center;
width: 100%;
.nz-chart-top{
}
.el-dropdown-link {
cursor: pointer;
}
.el-icon-arrow-down {
font-size: 12px;
}
.chart-title {
font-weight: bold;
font-size: 18px;
line-height: 26px;
color: #333;
margin: -3px 0 3px 10px;
}
}
.edit:after{
display: block;

38
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -7,7 +7,7 @@
}
</style>
<template>
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<!--
<div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
@@ -17,16 +17,23 @@
</div>
</div>
-->
<div class="clearfix">
<div class="table-title" v-show="firstShow">
{{data.title}}
</div>
<div class="nz-btn-group nz-btn-group-light edit button-panel-height" v-show="firstShow">
<button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
@click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" ><i class="nz-icon nz-icon-edit"></i></button><button
@click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-delete"></i></button><button
@click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
</div>
<div class="clearfix chartTitle" :id="'chartTitle'+chartIndex">
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
{{data.title}}<i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: 0px; transform-origin: center top; z-index: 1000;" >
<li @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li @click="editChart" class="el-dropdown-menu__item">
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
<li @click="removeChart" class="el-dropdown-menu__item">
<i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<li @click="showAllScreen" class="el-dropdown-menu__item">
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
</ul>
</el-dropdown>
</div>
<div class="mt-10" v-cloak v-show="firstShow">
@@ -153,6 +160,8 @@ export default {
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
firstShow: false, // 默认不显示操作按钮,
caretShow:false,
dropdownMenuShow:false,
divFirstShow:false,
//tableLoading: false,
columns: [
@@ -355,16 +364,19 @@ export default {
*/
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
this.startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
editChart() {
this.dropdownMenuShow=false;
this.$emit('on-edit-chart-block', this.data.id);
},
// 删除该图表
removeChart() {
this.dropdownMenuShow=false;
this.$emit('on-remove-chart-block', this.data.id);
},
//全屏时间条件查询
@@ -387,8 +399,12 @@ export default {
//this.firstShow = false;
this.$emit('on-search-data', this.data.id, this.searchTime);
},
clickos() {
this.dropdownMenuShow=false;
},
// 全屏查看
showAllScreen() {
this.dropdownMenuShow=false;
// 初始化同步时间
//this.searchTime = this.oldSearchTime;
//alert(JSON.stringify(this.oldSearchTime));

32
nezha-fronted/src/components/charts/line-chart-block.scss
View File

@@ -7,6 +7,12 @@
.clearfix{
margin-bottom: 7px;
}
.hidden{
visibility: hidden;
}
.visible{
visibility: visible;
}
.legend-shape{
display:inline-block;
margin-right:5px;
@@ -41,6 +47,19 @@
float:left;
line-height: 20px;
}
.nz-chart-dropdown {
height: 147px;
li {
/*padding: 0 20px !important;*/
padding-left:15px !important;
padding-right:0px !important;
width:140px;
text-align: left;
i {
margin-right: 10px;
}
}
}
.line-chart-block {
height: 100%;
//min-height: 0px;
@@ -50,6 +69,17 @@
padding: 20px 8px;
margin-bottom: 10px;
padding-bottom: 3px;
.chartTitle {
text-align: center;
width: 100%;
.nz-chart-top{
}
.el-dropdown-link {
cursor: pointer;
}
.el-icon-arrow-down {
font-size: 12px;
}
.chart-title {
font-weight: bold;
font-size: 18px;
@@ -57,6 +87,8 @@
color: #333;
margin: -3px 0 3px 10px;
}
}
.line-area {
box-sizing: border-box;
background: #FFF;

48
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -2,7 +2,7 @@
@import './line-chart-block.scss';
</style>
<template>
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<!--<div class="edit">
@@ -21,16 +21,45 @@
</span>
</div>
</div>-->
<div class="clearfix">
<div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
{{data.title}}<i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i>
</span>
<!--
<el-dropdown-menu slot="dropdown" class="nz-chart-dropdown" :popper-append-to-body="false">
<el-dropdown-item @click.native="refreshChart" ><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i>{{$t('dashboard.refresh')}}</el-dropdown-item>
<el-dropdown-item @click.native="editChart"><i style="font-size: 14px;margin-right: 11px;margin-left: 1px;" class="nz-icon nz-icon-edit"></i>{{$t('dashboard.edit')}}</el-dropdown-item>
<el-dropdown-item @click.native="removeChart" ><i style="font-size: 16px;" class="el-icon-delete"></i>{{$t('dashboard.delete')}}</el-dropdown-item>
<el-dropdown-item @click.native="showAllScreen" ><i style="font-size: 16px;" class="el-icon-full-screen"></i>{{$t('dashboard.screen')}}</el-dropdown-item>
</el-dropdown-menu>
-->
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: 0px; transform-origin: center top; z-index: 1000;" >
<li @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li @click="editChart" class="el-dropdown-menu__item">
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
<li @click="removeChart" class="el-dropdown-menu__item">
<i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<li @click="showAllScreen" class="el-dropdown-menu__item">
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
</ul>
</el-dropdown>
<!--
<div class="chart-title" v-show="firstShow">
{{data.title}}
</div>
<div class="nz-btn-group nz-btn-group-light edit button-panel-height" v-show="firstShow">
<button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
@click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button><button
@click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button><button
<button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button>
<button @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button>
<button @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button>
<button
@click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
</div>
-->
</div>
<div class="line-area" ref="lineChartArea" id="lineChartArea" v-show="firstShow"></div>
@@ -157,6 +186,8 @@
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
],
firstShow: false, // 默认不显示操作按钮,
caretShow:false,
dropdownMenuShow:false,
showLegend:true,
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
oldSearchTime:[],
@@ -919,16 +950,22 @@
this.echartModalStore.clear();
}
},
clickos() {
this.dropdownMenuShow=false;
},
// 删除该图表
removeChart() {
this.dropdownMenuShow=false;
this.$emit('on-remove-chart-block', this.data.id);
},
// 编辑图表
editChart() {
this.dropdownMenuShow=false;
this.$emit('on-edit-chart-block', this.data.id);
},
// 重新请求数据 刷新操作
refreshChart() {
this.dropdownMenuShow=false;
this.clearChart();
this.$refs['localLoading'+this.chartIndex].startLoading();
this.firstShow = false;
@@ -953,6 +990,7 @@
},
// 全屏查看
showAllScreen() {
this.dropdownMenuShow=false;
// 初始化同步时间
this.filter.start_time = this.stableFilter.start_time;
this.filter.end_time = this.stableFilter.end_time;