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

NEZ-1859 feat：chart header 新增显示/隐藏 状态

Browse Source
This commit is contained in:
zyh
2022-05-19 16:55:27 +08:00
parent 39326655ad
commit 65a93e3bd8
8 changed files with 44 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -1,23 +1,32 @@
.el-dropdown-menu.el-popper{
border: none;
}
.panel-chart {
border: 1px solid $--chart-box-border-color;
height: 100%;
display: flex;
position: relative;
flex-direction: column;
&:hover .chart-header--float{
background-color: $--chart-title-hover-background-color;
height: 39px !important;
opacity: 1 !important;
}
.chart-header {
&.chart-header--float {
position: absolute;
top: 0;
width: 100%;
z-index: 100;
z-index: 500;
box-sizing: border-box;
height: 10px;
height: 0px;
opacity: 0;
transition: all linear .2s;
&:hover {
height: 39px;
opacity: 1;
transition: all linear .3s;
.chart-header__tools {
.chart-header__tool .tool__icon {
visibility: visible;
}
}
}
display: flex;
@@ -25,15 +34,12 @@
align-items:center;
padding: 0 10px;
height: 39px;
font-size: 14px;
line-height: 40px;
color: $--color-text-primary;
transition: all 0.2s;
&:hover {
background-color: $--chart-title-hover-background-color;
.chart-header__tools {
.chart-header__tool .tool__icon {
visibility: visible;
@@ -105,20 +111,19 @@
width: 100%;
box-sizing: border-box;
margin-top: 15px;
&.chart-header--float {
position: absolute;
width: 100%;
z-index: 100;
box-sizing: border-box;
height: 10px;
opacity: 0;
transition: all linear .2s;
&:hover {
height: 39px;
opacity: 1;
}
}
// &.chart-header--float {
// position: absolute;
// width: 100%;
// z-index: 500;
// box-sizing: border-box;
// height: 10px;
// opacity: 0;
// transition: all linear .3s;
// &:hover {
// height: 39px;
// opacity: 1;
// }
// }
.chart-header__title {
max-width: calc(100% - 100px);
text-overflow: ellipsis;

3
nezha-fronted/src/components/chart/ChartScreenHeader.vue
View File

@@ -1,5 +1,6 @@
<template>
<div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header list-page">
<!-- <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header list-page"> -->
<div class="chart-screen-header list-page">
<span v-if="isError" class="chart-header-error">
<el-popover
placement="top-start"

3
nezha-fronted/src/components/chart/chart.vue
View File

@@ -1,6 +1,7 @@
<template>
<div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" >
<!-- <div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" > -->
<div class="nz-chart" :class="chartInfo.param.showHeader===0 ? '' : 'no-header'">
<loading :loading="loading"></loading>
<chart-no-data v-if="isNoData || isError || chartChildrenData || (isExportHtml&&(isAutotopology(chartInfo.type) || isDiagram(chartInfo.type) || isMap(chartInfo.type)))"></chart-no-data>
<template v-else>

2
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="nz-table2" style="height: 100%;padding: 0 10px 10px 10px;box-sizing: border-box">
<div class="nz-table2" style="height: 100%;padding: 10px;box-sizing: border-box">
<el-table
ref="dataTable"
class="chart-table"

3
nezha-fronted/src/components/chart/chartHeader.vue
View File

@@ -1,5 +1,6 @@
<template>
<div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header">
<!-- <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header"> -->
<div :class="{'chart-header--float': chartInfo.param.showHeader===0}" class="chart-header">
<span v-if="isError" class="chart-header-error">
<el-popover
placement="top-start"

2
nezha-fronted/src/components/chart/chartList.vue
View File

@@ -468,7 +468,7 @@ export default {
// console.info(e)
// }
height = (item.type === 'group' && item.param.collapse) ? this.headerH : item.height
param.showHeader = true
// param.showHeader = true
if (param.valueMapping) {
param.valueMapping.forEach(valueMapping => {
if (!valueMapping.show) {

2
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -428,7 +428,7 @@ export default {
case 'metrics':
case 'logs': {
this.chartData = []
elements.forEach((element,index) => {
elements.forEach((element, index) => {
this.chartData.push(this.dataJson[this.chartInfo.id + '_' + index].data.result)
})
break

10
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -209,7 +209,7 @@ export default {
switchHeader (value) {
// 1为显示 0为隐藏
this.editChart.param.showHeader = value
this.$set(this.editChart.param, 'showHeader', value)
},
clickOutside () {
@@ -373,7 +373,7 @@ export default {
valueMapping: false
},
thresholds: [{ value: undefined, color: '#eeeeeeff' }],
showHeader: 1
showHeader: this.editChart.param.showHeader
}
}
}
@@ -392,7 +392,7 @@ export default {
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
param: {
limit: 100,
showHeader: 1
showHeader: this.editChart.param.showHeader
}
}
}
@@ -428,7 +428,7 @@ export default {
}
],
valueMapping: [],
showHeader: 1
showHeader: this.editChart.param.showHeader
}
}
delete this.editChart.elements
@@ -446,7 +446,7 @@ export default {
},
param: {
url: '',
showHeader: 1
showHeader: this.editChart.param.showHeader
}
}
delete this.editChart.elements