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

fix:修改BUG

Browse Source 
1.dashboard模块：调整图表空白区域大小；图表统一标题显示方式；调整标题行高度及4个按钮大小
2.每个模块右上角create按钮取消文字，鼠标悬浮显示文字
This commit is contained in:
hanyuxia
2020-02-22 18:44:01 +08:00
parent bfbeb179c0
commit b0fd2ddf2c
14 changed files with 116 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -199,7 +199,9 @@ export default {
// 没有数据的设置提示信息暂无数据-针对每一个图 // 没有数据的设置提示信息暂无数据-针对每一个图
if (len === 0) { if (len === 0) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？ if(this.$refs.editChart[index]){
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？
}
}); });
} else { } else {
let startTime = ''; let startTime = '';
@@ -327,44 +329,47 @@ export default {
} }
} }
}); });
if (chartItem.type === 'table') {//表格 if(this.$refs.editChart[index]) {
if(filterType==='showFullScreen'){//table的全屏查询 if (chartItem.type === 'table') {//表格
this.$refs.editChart[index].setData(chartItem, tableData, if (filterType === 'showFullScreen') {//table的全屏查询
this.filter.panelId, this.filter,filterType); this.$refs.editChart[index].setData(chartItem, tableData,
}else { this.filter.panelId, this.filter, filterType);
this.$refs.editChart[index].setData(chartItem, tableData, } else {
this.filter.panelId, this.filter); this.$refs.editChart[index].setData(chartItem, tableData,
} this.filter.panelId, this.filter);
}
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) { } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
if (series.length && chartItem.type === 4) {//曲线汇总 if (series.length && chartItem.type === 4) {//曲线汇总
//series.push(sumData);//后续需要 //series.push(sumData);//后续需要
} }
if(filterType==='showFullScreen'){//table的全屏查询 if (filterType === 'showFullScreen') {//table的全屏查询
this.$refs.editChart[index].setData(chartItem, series, this.$refs.editChart[index].setData(chartItem, series,
this.filter.panelId, this.filter,legend,filterType); this.filter.panelId, this.filter, legend, filterType);
}else { } else {
this.$refs.editChart[index].setData(chartItem, series, this.$refs.editChart[index].setData(chartItem, series,
this.filter.panelId, this.filter,legend); this.filter.panelId, this.filter, legend);
}
} }
} }
} else { } else {
const type = chartItem.type; const type = chartItem.type;
if (type === 'table') { if(this.$refs.editChart[index]) {
if(filterType==='showFullScreen'){//table的全屏查询 if (type === 'table') {
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId, if (filterType === 'showFullScreen') {//table的全屏查询
this.filter,filterType); this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
}else { this.filter, filterType);
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId, } else {
this.filter); this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
} this.filter);
} else if (type === 'line' || type === 'bar' || chartItem.type === 4) { }
if(filterType==='showFullScreen'){//table的全屏查询 } else if (type === 'line' || type === 'bar' || chartItem.type === 4) {
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId, if (filterType === 'showFullScreen') {//table的全屏查询
this.filter,filterType); this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
}else { this.filter, filterType);
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId, } else {
this.filter); this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
this.filter);
}
} }
} }
} }

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

@@ -25,7 +25,7 @@
.table-title { .table-title {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
line-height: 30px; line-height: 26px;
color: #333; color: #333;
} }
.edit:after{ .edit:after{
@@ -33,6 +33,13 @@
content: ""; content: "";
clear: both; clear: both;
} }
.button-panel-height{
height:26px;
}
.button-panel-height button{
height:26px;
}
.edit { .edit {
position: absolute; position: absolute;
right: 20px; right: 20px;

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

@@ -16,9 +16,9 @@
<div class="table-title" v-show="firstShow"> <div class="table-title" v-show="firstShow">
{{data.title}} {{data.title}}
</div> </div>
<div class="nz-btn-group nz-btn-group-light edit" v-show="firstShow"> <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 <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="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="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> @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>

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

@@ -2,12 +2,10 @@
.clearfix:after{ .clearfix:after{
display: block; display: block;
content: ""; content: "";
height:0;
visibility:hidden;
clear: both; clear: both;
} }
.clearfix{ .clearfix{
//margin-bottom: 20px; margin-bottom: 7px;
} }
.legend-shape{ .legend-shape{
display:inline-block; display:inline-block;
@@ -47,9 +45,15 @@
position: relative; position: relative;
background: #FFF; background: #FFF;
border: 1px solid #d8dce1; border: 1px solid #d8dce1;
padding: 20px 30px; padding: 20px 8px;
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 3px; padding-bottom: 3px;
.chart-title {
font-weight: bold;
font-size: 18px;
line-height: 26px;
color: #333;
}
.line-area { .line-area {
box-sizing: border-box; box-sizing: border-box;
background: #FFF; background: #FFF;
@@ -60,6 +64,12 @@
content: ""; content: "";
clear: both; clear: both;
}*/ }*/
.button-panel-height{
height:26px;
}
.button-panel-height button{
height:26px;
}
.edit { .edit {
position: absolute; position: absolute;
right: 20px; right: 20px;

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

@@ -2,7 +2,7 @@
@import './line-chart-block.scss'; @import './line-chart-block.scss';
</style> </style>
<template> <template>
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow"> <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow">
<loading :ref="'localLoading'+chartIndex"></loading> <loading :ref="'localLoading'+chartIndex"></loading>
<!--<div class="edit"> <!--<div class="edit">
@@ -21,14 +21,19 @@
</span> </span>
</div> </div>
</div>--> </div>-->
<div class="nz-btn-group nz-btn-group-light edit" v-show="firstShow"> <div class="clearfix">
<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 <div class="chart-title" v-show="firstShow">
@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 {{data.title}}
@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 </div>
@click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button> <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
@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>
<div class="line-area" ref="lineChartArea" id="lineChartArea" v-show="firstShow"></div> <div class="line-area" style="border:solid 0px red;" ref="lineChartArea" id="lineChartArea" v-show="firstShow"></div>
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow"> <div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow">
<div v-for="(item, index) in legendList" :title="item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index"> <div v-for="(item, index) in legendList" :title="item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
@@ -61,7 +66,7 @@
<!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>--> <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
</div> </div>
</div> </div>
<div class="line-area " ref="screenShowArea" id="screenShowArea" ></div> <div class="line-area " ref="screenShowArea" id="screenShowArea" style="margin-top:10px;"></div>
<div class="legend-container" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend"> <div class="legend-container" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend">
<div v-for="(item, index) in screenLegendList" :title="item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index"> <div v-for="(item, index) in screenLegendList" :title="item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}} <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}}
@@ -317,6 +322,7 @@
} }
var chartWidth = ele.clientWidth; var chartWidth = ele.clientWidth;
var title = { var title = {
show:false,
text: chartInfo.title || null, text: chartInfo.title || null,
textAlign: 'left', textAlign: 'left',
useHTML: true, useHTML: true,
@@ -330,6 +336,9 @@
} }
}; };
var option = { var option = {
title:{
show:false,
},
color: this.bgColorList, color: this.bgColorList,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@@ -500,9 +509,9 @@
}, },
grid: { grid: {
//height:"50%", //height:"50%",
//top: '13%', top: 13,
left: 65, left: 65,
right: 65, right: 45,
containLabel: false, containLabel: false,
bottom:70,//156 bottom:70,//156
}, },
@@ -653,7 +662,7 @@
}); });
*/ */
this.echartStore.clear(); this.echartStore.clear();
option.title = title; //option.title = title;
this.echartStore.setOption(option);//创建图表 this.echartStore.setOption(option);//创建图表
//this.echartStore.hideLoading(); //this.echartStore.hideLoading();
this.$refs['localLoading'+this.chartIndex].endLoading(); this.$refs['localLoading'+this.chartIndex].endLoading();
@@ -671,9 +680,9 @@
this.$nextTick(() => { this.$nextTick(() => {
let divHeight = this.$refs.legendArea.offsetHeight; let divHeight = this.$refs.legendArea.offsetHeight;
if(!chartInfo.height){ if(!chartInfo.height){
this.echartStore.resize({height:(400-divHeight)}); this.echartStore.resize({height:(400-divHeight-35)});
}else { }else {
this.echartStore.resize({height:(chartInfo.height-divHeight-25)}); this.echartStore.resize({height:(chartInfo.height-divHeight-25-35)});
} }
}); });
this.firstShow = true; // 展示操作按键 this.firstShow = true; // 展示操作按键

9
nezha-fronted/src/components/common/language/cn.js
View File

@@ -28,7 +28,14 @@ const cn = {
query: '查询', query: '查询',
back: '返回', back: '返回',
unavailable: '不可用', unavailable: '不可用',
available: '可用' available: '可用',
createChart:'新增图表',
createProject:'新增项目',
createAsset:'新增资产',
createAlertRule:'新增告警规则',
createAccount:'新增用户名',
createPrometheusServer:'新增 prometheus server',
createDatacenter:'新增DC'
}, },
dashboard:{ dashboard:{
title:'仪表盘', title:'仪表盘',

7
nezha-fronted/src/components/common/language/en.js
View File

@@ -36,6 +36,13 @@ const en = {
unavailable: 'Unavailable', unavailable: 'Unavailable',
available: 'Available', available: 'Available',
changePwd:'Change Password',//修改密码 changePwd:'Change Password',//修改密码
createChart:'create chart',
createProject:'create project',
createAsset:'create asset',
createAlertRule:'create alert rule',
createAccount:'create account',
createPrometheusServer:'create prometheus server',
createDatacenter:'create datacenter'
}, },
dashboard:{ dashboard:{
title:'Dashboard', title:'Dashboard',

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

@@ -20,11 +20,9 @@
</div> </div>
<div> <div>
<button id="alert-add" @click="toAdd" <button id="alert-add" @click="toAdd" :title="$t('overall.createAlertRule')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82"> class="nz-btn nz-btn-size-normal nz-btn-style-light float-right ">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"> <div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input> <search-input :searchMsg="searchMsg" @search="search"></search-input>

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

@@ -33,10 +33,8 @@
<div class="top-tools"> <div class="top-tools">
<div></div> <div></div>
<div> <div>
<button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-add"> <button @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="asset-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
<!-- ADD按钮 --> <!-- ADD按钮 -->
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div> <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>

6
nezha-fronted/src/components/page/config/account.vue
View File

@@ -21,11 +21,9 @@
<div class="top-tools"> <div class="top-tools">
<div></div> <div></div>
<div> <div>
<button type="button" @click="toAdd" <button type="button" @click="toAdd" :title="$t('overall.createAccount')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="account-add"> class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="account-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"> <div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input> <search-input :searchMsg="searchMsg" @search="search"></search-input>

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

@@ -23,11 +23,9 @@
<div class="top-tools"> <div class="top-tools">
<div></div> <div></div>
<div> <div>
<button type="button" @click="" <button type="button" @click="" :title="$t('overall.createDatacenter')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="dc-add"> class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="dc-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"> <div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input> <search-input :searchMsg="searchMsg" @search="search"></search-input>

4
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -21,11 +21,9 @@
<div class="top-tools"> <div class="top-tools">
<div></div> <div></div>
<div> <div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " :title="$t('overall.createPrometheusServer')"
id="prom-add"> id="prom-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"> <div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input> <search-input :searchMsg="searchMsg" @search="search"></search-input>

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

@@ -63,11 +63,9 @@
<!-- <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>--> <!-- <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>-->
<!-- </div>--> <!-- </div>-->
<button @click="toAddChart" <button @click="toAddChart" :title="$t('overall.createChart')"
class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-82"> class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
</div> </div>
</div> </div>
@@ -390,7 +388,9 @@
params.start_time = startTimeTmp; params.start_time = startTimeTmp;
params.end_time = endTimeTmp; params.end_time = endTimeTmp;
} }
this.$refs.chartList.initData(params); if(this.$refs.chartList){
this.$refs.chartList.initData(params);
}
}, },
/*图表相关操作--end*/ /*图表相关操作--end*/
@@ -706,7 +706,6 @@
li { li {
padding: 0 20px !important; padding: 0 20px !important;
} }
} }

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

@@ -99,10 +99,8 @@
<!-- </div>--> <!-- </div>-->
</div> </div>
<div> <div>
<button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep"> <button @click="toCreateEndpoint" :title="$t('overall.createProject')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="project-add-ep">
<span class='top-tool-btn-txt'> <i class="nz-icon-create-square nz-icon"></i>
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div> <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
</div> </div>