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

perf: dashboard 图表最大化、endpoint view graph弹窗修改

Browse Source 
1.统一高度设为80%
This commit is contained in:
陈劲松
2020-03-06 20:54:44 +08:00
parent 7a4d606212
commit 94f00a35b7
6 changed files with 62 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1107,8 +1107,21 @@ li{
/* --end--复选框自定义颜色 */
/* dashboard-dialog */
.nz-dialog {
overflow: hidden;
}
.nz-dialog .el-dialog {
border-radius: 10px;
border-radius: 5px;
}
.line-chart-block-modal .el-dialog {
margin-top: 5% !important;
}
.table-chart-dialog .el-dialog {
height: 80%;
margin-top: 5% !important;
}
.table-chart-dialog .el-dialog .el-dialog__body {
height: calc(100% - 100px);
}
.nz-dialog .el-dialog__body {
padding: 0 20px 30px 20px;

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

@@ -25,7 +25,7 @@
</div>
<div class="mt-10" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border tooltip-effect="light" v-cloak v-scrollBar:el-table>
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="350" :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table>
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
@@ -38,7 +38,7 @@
</el-table>
</div>
<!--全屏-->
<el-dialog class="nz-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenModal = false;" >
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenModal = false;" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
@@ -47,7 +47,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>
<el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border tooltip-effect="light" v-scrollBar:el-table>
<el-table style="margin-top: 30px;" class="nz-table" height="100%" :data="seriesItemScreen" border tooltip-effect="light" v-scrollBar:el-table>
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>

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

@@ -29,6 +29,9 @@
line-height: 18px;
font-family: Roboto,Helvetica Neue,Arial,sans-serif;
}
.legend-container-screen.legend-container {
height: 115px;
}
.legend-item{
text-overflow:ellipsis;
white-space:nowrap;
@@ -107,12 +110,12 @@
}
.line-chart-block-modal {
.el-dialog{
height:480px;
height: 80%;
}
.line-area {
box-sizing: border-box;
background: #FFF;
min-height: 95px;
height: 100%;
span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
display: block !important;
width: 50%;
@@ -135,4 +138,8 @@
.pt10{
padding-top:10px;
}
.el-dialog__body {
height: calc(100% - 200px);
}
}

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

@@ -69,12 +69,16 @@
</div>
</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 legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend">
<el-scrollbar style="height: 100%;" ref="screenLegendScrollbar">
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias: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.alias?item.alias:item.name}}
<br/><!--bgColorList[index]-->
</div>
</el-scrollbar>
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<!--</Modal>-->
@@ -605,7 +609,6 @@
//bottom:0
},
grid: {
//height:"50%",
top: 13,
left: 0,
right: 30,
@@ -854,8 +857,9 @@
});
}
this.$nextTick(() => {
let divHeight = this.$refs.screenLegendArea.offsetHeight;
this.echartModalStore.resize({height:(400-divHeight)});
this.$refs.screenLegendScrollbar.update();
/*let divHeight = this.$refs.screenLegendArea.offsetHeight;
this.echartModalStore.resize({height: '100%'});*/
});
}
},

8
nezha-fronted/src/components/common/exportXLSX.vue
View File

@@ -260,7 +260,7 @@
/*去除上传文件动画end*/
</style>
<style>
.el-dialog__body{
.export-xlsx .el-dialog__body{
padding: 10px 20px 20px 20px;
}
.export-xlsx .el-button:focus, .export-xlsx .el-button:hover {
@@ -291,7 +291,7 @@
position: relative;
top:-2px;
}
.el-dropdown .el-dropdown__caret-button {
.export-xlsx .el-dropdown .el-dropdown__caret-button {
padding-left: 5px;
padding-right: 5px;
border-left: none;
@@ -326,7 +326,7 @@
font-weight: bold;
}
/**dialog 在视图中居中显示start*/
.el-dialog{
.export-xlsx .el-dialog{
display: flex;
flex-direction: column;
margin:0 !important;
@@ -338,7 +338,7 @@
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
}
.el-dialog .el-dialog__body{
.export-xlsx .el-dialog .el-dialog__body{
flex:1;
overflow: auto;
}

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

@@ -26,6 +26,7 @@
<style scope>
.chart-bottom {
text-align: center;
margin-top: 16px;
}
</style>
<template>
@@ -300,14 +301,16 @@
<!--<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 " style="height: 300px" ref="viewGraphChart" id="viewGraphChart"></div>
<div class="line-area" ref="viewGraphChart" id="viewGraphChart"></div>
<div class="legend-container" id="legendArea" ref="legendArea">
<el-scrollbar style="height: 100%" ref="chartScrollbar">
<div v-for="(item, index) in legend" :title="hideSameLabels&&item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{hideSameLabels&&item.alias?item.alias:item.name}}
<br/>
</div>
</el-scrollbar>
</div>
<div class="line-100 margin-t-20 margin-b-30"></div>
<div class="line-100 margin-t-10"></div>
<div class="chart-bottom">
<button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
</div>
@@ -659,10 +662,11 @@
y:'bottom',
},
grid: {
//height:"50%",
//top: '13%',
containLabel: false,
bottom:70,//156
top: 13,
left: 0,
right: 30,
containLabel: true,
bottom:35,//156
},
dataZoom: [{
type: 'slider',
@@ -1343,6 +1347,7 @@
this.chartOptions.color=this.bgColorList;
this.chartOptions.series=this.chartDatas;
this.graphChart.setOption(this.chartOptions);//创建图表
this.$refs.chartScrollbar.update();
});
})
},