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

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

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

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

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

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

@@ -16,9 +16,9 @@
<div class="table-title" v-show="firstShow">
{{data.title}}
</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
@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="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
</div>

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

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

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

@@ -21,14 +21,19 @@
</span>
</div>
</div>-->
<div class="nz-btn-group nz-btn-group-light edit" v-show="firstShow">
<div class="clearfix">
<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
@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>
<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 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>-->
</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 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}}
@@ -317,6 +322,7 @@
}
var chartWidth = ele.clientWidth;
var title = {
show:false,
text: chartInfo.title || null,
textAlign: 'left',
useHTML: true,
@@ -330,6 +336,9 @@
}
};
var option = {
title:{
show:false,
},
color: this.bgColorList,
tooltip: {
trigger: 'axis',
@@ -500,9 +509,9 @@
},
grid: {
//height:"50%",
//top: '13%',
top: 13,
left: 65,
right: 65,
right: 45,
containLabel: false,
bottom:70,//156
},
@@ -653,7 +662,7 @@
});
*/
this.echartStore.clear();
option.title = title;
//option.title = title;
this.echartStore.setOption(option);//创建图表
//this.echartStore.hideLoading();
this.$refs['localLoading'+this.chartIndex].endLoading();
@@ -671,9 +680,9 @@
this.$nextTick(() => {
let divHeight = this.$refs.legendArea.offsetHeight;
if(!chartInfo.height){
this.echartStore.resize({height:(400-divHeight)});
this.echartStore.resize({height:(400-divHeight-35)});
}else {
this.echartStore.resize({height:(chartInfo.height-divHeight-25)});
this.echartStore.resize({height:(chartInfo.height-divHeight-25-35)});
}
});
this.firstShow = true; // 展示操作按键

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

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

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

@@ -36,6 +36,13 @@ const en = {
unavailable: 'Unavailable',
available: 'Available',
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:{
title:'Dashboard',

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

@@ -20,11 +20,9 @@
</div>
<div>
<button id="alert-add" @click="toAdd"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
<span class="top-tool-btn-txt">
<button id="alert-add" @click="toAdd" :title="$t('overall.createAlertRule')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right ">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
<div class="top-tool-search float-right">
<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></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">
<span class="top-tool-btn-txt">
<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">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
<!-- ADD按钮 -->
</button>
<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></div>
<div>
<button type="button" @click="toAdd"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="account-add">
<span class="top-tool-btn-txt">
<button type="button" @click="toAdd" :title="$t('overall.createAccount')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="account-add">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
<div class="top-tool-search float-right">
<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></div>
<div>
<button type="button" @click=""
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="dc-add">
<span class="top-tool-btn-txt">
<button type="button" @click="" :title="$t('overall.createDatacenter')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="dc-add">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
<div class="top-tool-search float-right">
<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></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">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
<div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input>

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

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

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

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