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

perf: 未加载的chart显示背景和title

Browse Source
This commit is contained in:
chenjinsong
2020-06-05 17:09:27 +08:00
parent f904c7491a
commit f3cde35001
8 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-alert" ref="resizeBox">
<div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
<el-popover
@@ -20,10 +20,10 @@
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" v-show="!isPreview&&firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{data.title}}</span>
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -300,6 +300,9 @@ export default {
'pick-time':pickTime,
},
props: {
chartData: {
type: Object
},
// 看板id
panelId: {
type: Number,

4
nezha-fronted/src/components/charts/chart-asset-info.vue
View File

@@ -5,7 +5,7 @@
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-asset" ref="resizeBox">
<div class="chart-asset-info" :id="'chartAssetInfoDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="chart-asset-info" :id="'chartAssetInfoDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
@@ -24,7 +24,7 @@
<span class="chart-title-text">{{$t('asset.createAssetTab.assetInfo')}}</span>
</span>
</div>
<div class="mt-10 chart-info-container" v-cloak v-show="firstShow" >
<div class="mt-10 chart-info-container" v-cloak>
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="asset-info-content" >
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
<div style="padding: 0 15px">

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

@@ -85,6 +85,7 @@
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:chart-data="item"
:chart-index="index"></chart-table>
<chart-url v-if="item.type === 'url'" :ref="'editChart'+item.id" :key="'inner' + item.id"
@@ -1407,7 +1408,6 @@
if(chartType!=='url'){
that.getChartDataForSearch(item,index);
} else {
that.$refs['editChart'+item.id][0].showLoad(item);
}
}

4
nezha-fronted/src/components/charts/chart-project-info.vue
View File

@@ -5,7 +5,7 @@
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-project" ref="resizeBox">
<div class="chart-project-info" :id="'chartProjectInfoDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="chart-project-info" :id="'chartProjectInfoDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
@@ -24,7 +24,7 @@
<span class="chart-title-text">{{$t('project.chart.projectInfo')}}</span>
</span>
</div>
<div class="mt-10 chart-info-container" v-cloak v-show="firstShow" >
<div class="mt-10 chart-info-container" v-cloak>
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="asset-info-content" >
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
<div style="padding: 0 15px">

9
nezha-fronted/src/components/charts/chart-single-stat.vue
View File

@@ -5,7 +5,7 @@
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-single" ref="resizeBox">
<div class="chart-single-stat" :id="'chartSingleStatDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="chart-single-stat" :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
@@ -20,10 +20,10 @@
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{data.title}}</span>
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -84,6 +84,9 @@ export default {
'time-picker':timePicker
},
props: {
chartData: {
type: Object
},
// 看板id
panelId: {
type: Number,

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

@@ -5,7 +5,7 @@
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-table" ref="resizeBox">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
@@ -20,10 +20,10 @@
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{data.title}}</span>
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -100,6 +100,9 @@ export default {
'time-picker':timePicker
},
props: {
chartData: {
type: Object
},
// 看板id
panelId: {
type: Number,

11
nezha-fronted/src/components/charts/chart-url.vue
View File

@@ -5,13 +5,13 @@
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-url" ref="resizeBox">
<div class="chart-url" :id="'chartUrlDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
<div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{data.title}}</span>
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -40,7 +40,7 @@
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @opened="initDialog" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<span class="nz-dialog-title">{{chartData.title}}</span>
</div>
<iframe :id="'urlContainerFull'+chartIndex" frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
style="z-index:5000;padding-bottom:6px;"
@@ -67,6 +67,9 @@ export default {
'loading': loading,
},
props: {
chartData: {
type: Object
},
chartData: {
type: Object
},

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

@@ -5,7 +5,7 @@
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-echarts" ref="resizeBox">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
<el-popover
@@ -20,10 +20,10 @@
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{data.title}}</span>
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -1294,6 +1294,7 @@
},
mounted() {
this.firstLoad = false;
console.info(this.chartData)
},
beforeDestroy() {
this.clearChart();