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="nz-chart-resize" :id="id">
<div class="resize-shadow" ref="resizeShadow"></div> <div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-alert" ref="resizeBox"> <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> <loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview"> <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
<el-popover <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 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> <el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title"> <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 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"> <el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i> <i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip> </el-tooltip>
@@ -46,12 +46,12 @@
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li> <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"> <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> <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> <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
</ul> </ul>
</el-dropdown> </el-dropdown>
</div> </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 <alertMessageTable
class="nz-table2" class="nz-table2"
:id="'tableContainer'+chartIndex" :id="'tableContainer'+chartIndex"
@@ -791,8 +791,8 @@ export default {
}, },
resize (chartItem) { resize (chartItem) {
const deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight const deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight
const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container') // const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container')
container.style.height = `calc(100% - ${deHeight}px)` // container.style.height = `calc(100% - ${deHeight}px)`
this.tableHeight = 'calc(100% - 34px)' this.tableHeight = 'calc(100% - 34px)'
}, },
showLoad (chartItem) { showLoad (chartItem) {

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

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

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

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