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

NEZ-672 ： 修改所有chart的预览功能 高度显示不正确的问题

Browse Source
This commit is contained in:
zhangyu
2021-05-26 13:58:39 +08:00
parent 16f128fc3f
commit 2abbbf92b4
4 changed files with 65 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@
<div class="nz-chart-resize" :id="id">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-alert" ref="resizeBox">
<div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="chart-alert-info table-container" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
<el-popover
@@ -23,9 +23,9 @@
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-text">{{chartData?chartData.name:'-'}}</span>
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<span v-if="chartData&&chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
@@ -46,12 +46,12 @@
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<li v-has="'panel_chart_add'" class="el-dropdown-menu__item" @click="duplicate">
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
<li v-has="'panel_chart_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
<li v-has="'panel_chart_edit'" v-if="from !== 'chartTemp'&&chartData&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
</ul>
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow || isPreview">
<div class="mt-10 table-container" v-cloak v-show="firstShow || isPreview" :style="isPreview?'height:100%':''">
<alertMessageTable
class="nz-table2"
:id="'tableContainer'+chartIndex"
@@ -791,8 +791,8 @@ export default {
},
resize (chartItem) {
const deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight
const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container')
container.style.height = `calc(100% - ${deHeight}px)`
// const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container')
// container.style.height = `calc(100% - ${deHeight}px)`
this.tableHeight = 'calc(100% - 34px)'
},
showLoad (chartItem) {

83
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -19,6 +19,11 @@
overflow: hidden;
white-space: nowrap;
}
/deep/ .el-dialog__body{
height: 70vh;
display: block;
min-height: 300px;
}
</style>
<style>
.char-url-preview html{
@@ -75,9 +80,9 @@
</div>
<template v-if="chart.type==='line' || chart.type==='bar'||chart.type==='stackArea' || chart.type == 'endpointInfo' ||chart.type =='pie'">
<div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="height-100">
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;height: calc(70vh - 50px);min-height: 300px;"></div>
<div class="chart-no-data height-100" v-show="noData">No Data</div>
<template v-if="!hasLegendOptions">
<div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
@@ -118,7 +123,7 @@
<template v-if="chart.type==='singleStat'">
<div id="chartSingleStatPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"
style=" height:100%;display:table;text-align:center;width:calc(100% - 16px);color:#000;" >
style=" height:100%;display:table;text-align:center;width:calc(100% - 16px);color:#000;" class="height-100">
<div class="line-area" ref="singleStatArea" id="singleStatArea" :style="{color:mapping&&mapping.color?mapping.color.text:'#000',background:mapping&&mapping.color?mapping.color.bac:'#fff'}" style="margin-top:0px; text-align:center;
vertical-align: middle;
display:table-cell;
@@ -130,7 +135,7 @@
</template>
<template v-if="chart.type==='table'">
<div id="chartTablePreview" :class="{'visible':tableShow,'hidden':!tableShow}" >
<div id="chartTablePreview" :class="{'visible':tableShow,'hidden':!tableShow}" class="height-100">
<el-table :data="seriesItemScreen" border class="nz-table" height="95%" id="tableContainer" style="margin-top: 10px;" tooltip-effect="light">
<!-- <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>-->
@@ -153,24 +158,24 @@
</template>
<template v-if="chart.type==='url'">
<div id="chartUrlPreview" :class="{'visible':urlShow,'hidden':!urlShow}" class="char-url-preview">
<div id="chartUrlPreview" :class="{'visible':urlShow,'hidden':!urlShow}" class="char-url-preview height-100" >
<iframe id="chartUrlFrame" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
style="z-index:5000;"
></iframe>
</div>
</template>
<chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart"></chart-alert-list>
<chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart" :chart-data="chart" class="height-100"></chart-alert-list>
<template v-if="chart.type==='text'">
<div id="chartTextPreview" class="chart-text-preview">
<div id="chartTextPreview" class="chart-text-preview height-100">
<div style="height: 100%; overflow: auto;">
<div style="height: 100%;" v-html="chart.param.text" ></div>
</div>
</div>
</template>
<loading ref="loadingPreview"></loading>
<loading ref="loadingPreview" class="height-100"></loading>
</el-dialog>
</template>
<script>
@@ -182,7 +187,7 @@ import chartDataFormat from './chartDataFormat'
import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
import chartAlertList from './chart-alert-list'
import chartConfig from '../page/dashboard/overview/chartConfig'
import moment from "moment-timezone";
import moment from 'moment-timezone'
export default {
name: 'chartPreview',
components: {
@@ -243,7 +248,7 @@ export default {
urlShow: true,
searchTime: bus.getTimezontDateRange(),
// oldSearchTime:[],
minHeight: 200,
minHeight: 500,
chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight: 58,
legendHeight: 80,
@@ -283,29 +288,29 @@ export default {
}
// 设置高度 chart-table
this.$nextTick(() => {
// const chartBox = document.getElementById('chartPreviewDailog');
// let height = this.chart.height;
let height = Math.round(this.chart.height / 10) * 10
if (height < this.minHeight) {
height = this.minHeight
}
const dailogBox = document.querySelector('#chartPreviewDailog .el-dialog')
dailogBox.style.height = `${height}px`
// const addChartBox = document.querySelector('.right-box-add-chart')
// addChartBox.style.cssText = 'z-index:1500 !important';
if (chartType === 'table') {
const chartDiv = document.getElementById(chartContainerId)
chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 25}px`
const tableBox = document.getElementById('tableContainer')
tableBox.style.height = `${height - this.titleHeight - this.pageHeight - 25}px`// -75-32+25
} else {
const chartDiv = document.getElementById(chartContainerId)
chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 15}px`
}
})
// this.$nextTick(() => {
// // const chartBox = document.getElementById('chartPreviewDailog');
// // let height = this.chart.height;
// let height = Math.round(this.chart.height / 10) * 10
// if (height < this.minHeight) {
// height = this.minHeight
// }
//
// const dailogBox = document.querySelector('#chartPreviewDailog .el-dialog')
// dailogBox.style.height = `${height}px`
//
// // const addChartBox = document.querySelector('.right-box-add-chart')
// // addChartBox.style.cssText = 'z-index:1500 !important';
// if (chartType === 'table') {
// const chartDiv = document.getElementById(chartContainerId)
// chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 25}px`
// const tableBox = document.getElementById('tableContainer')
// tableBox.style.height = `${height - this.titleHeight - this.pageHeight - 25}px`// -75-32+25
// } else {
// const chartDiv = document.getElementById(chartContainerId)
// chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 15}px`
// }
// })
this.screenModal = true
},
@@ -779,6 +784,7 @@ export default {
},
// chartSite用于区分是全屏显示还是局部显示
initChart (chartInfo, dataArg, ele, legend) {
console.log(123123132)
const self = this
let minTime = null
let maxTime = null
@@ -1023,7 +1029,7 @@ export default {
}
this.$nextTick(() => {
const divHeight = this.$refs.screenLegendArea.offsetHeight
this.echartModalStore.resize({ height: (chartInfo.height - this.chartSpaceHeight - divHeight - this.titleHeight) })
this.echartModalStore.resize()
this.echartModalStore.clear()
if (dataArg.length < 1) {
this.echartModalStore.setOption(chartConfig.getOption('noData'))
@@ -1094,6 +1100,9 @@ export default {
})
}
})
setTimeout(() => {
this.echartModalStore.resize()
}, 100)
},
initStaticsBar: function (chartInfo, dataArg, legend) {
const self = this
@@ -1236,7 +1245,7 @@ export default {
}
this.$nextTick(() => {
const divHeight = this.$refs.screenLegendArea.offsetHeight
this.echartModalStore.resize({ height: (chartInfo.height - this.chartSpaceHeight - divHeight - this.titleHeight) })
this.echartModalStore.resize()
this.echartModalStore.clear()
if (dataArg[0].data.length < 1) {
this.echartModalStore.setOption(chartConfig.getOption('noData'))
@@ -1301,7 +1310,7 @@ export default {
}
this.$nextTick(() => {
const divHeight = this.$refs.screenLegendArea.offsetHeight
this.echartModalStore.resize({ height: (chartInfo.height - this.chartSpaceHeight - divHeight - this.titleHeight) })
this.echartModalStore.resize()
this.echartModalStore.clear()
if (dataArg[0].data.length < 1) {
this.echartModalStore.setOption(chartConfig.getOption('noData'))

6
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -302,8 +302,10 @@ export default {
.bottom-panel {
padding-top: 15px;
background-color: white;
padding-bottom: 50px;
height: calc(100% - 50px);
/*padding-bottom: 50px;*/
/*height: calc(100% - 50px);*/
padding-bottom: 10px;
height: calc(100% - 30px);
}
.chart-temp{
height: calc(100% - 20px);

9
nezha-fronted/src/components/common/nezhaColor.vue
View File

@@ -58,7 +58,14 @@ export default {
presetColors: {
type: Array,
default () {
return []
return [
'#19730E', '#37872D', '#73BF69',
'#CC9D00', '#E0B400', '#FADE2A',
'#AD0317', '#C4162A', '#F2495C',
'#1250B0', '#1F60C4', '#5794F2',
'#E55400', '#FA6400', '#FF9830',
'#7C2EA3', '#8F3BB8', '#B877D9'
]
}
}
},