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

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

@@ -1,5 +1,6 @@
<template> <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"> <span v-if="isError" class="chart-header-error">
<el-popover <el-popover
placement="top-start" placement="top-start"

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

@@ -1,6 +1,7 @@
<template> <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> <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> <chart-no-data v-if="isNoData || isError || chartChildrenData || (isExportHtml&&(isAutotopology(chartInfo.type) || isDiagram(chartInfo.type) || isMap(chartInfo.type)))"></chart-no-data>
<template v-else> <template v-else>

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

@@ -1,5 +1,5 @@
<template> <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 <el-table
ref="dataTable" ref="dataTable"
class="chart-table" class="chart-table"

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

@@ -1,5 +1,6 @@
<template> <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"> <span v-if="isError" class="chart-header-error">
<el-popover <el-popover
placement="top-start" placement="top-start"

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

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

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

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

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

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