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

perf: overview-loading和N/A统一居中且不再同时显示

Browse Source
This commit is contained in:
chenjinsong
2020-05-07 15:22:03 +08:00
parent e8745745bc
commit 0dc6f9d0e0
4 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/css/main.css
View File

@@ -13,8 +13,8 @@
background-size: 48px 48px; background-size: 48px 48px;
width: 48px; width: 48px;
height: 48px; height: 48px;
position: relative;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-top: 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }

2
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -288,9 +288,11 @@
}, },
startLoading:function(){ startLoading:function(){
this.$refs.loading.startLoading(); this.$refs.loading.startLoading();
this.$emit("is-loading", true);
}, },
endLoading:function(){ endLoading:function(){
this.$refs.loading.endLoading(); this.$refs.loading.endLoading();
this.$emit("is-loading", false);
}, },
guid() { guid() {
function S4() { function S4() {

2
nezha-fronted/src/components/page/dashboard/overview/overview2.scss
View File

@@ -161,7 +161,7 @@
left: 50%; left: 50%;
top: 50%; top: 50%;
color: #bbb; color: #bbb;
transform: translate(-50%， -50%); transform: translate(-50%, -50%);
font-size: 1rem; font-size: 1rem;
} }
.content-col-box .content-col-title .nz-dashboard-picker { .content-col-box .content-col-title .nz-dashboard-picker {

57
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -95,28 +95,31 @@
</span> </span>
</div> </div>
<div class="content-col-content"> <div class="content-col-content">
<chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend" :unit="15"></chart-box> <chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend" :unit="15" @is-loading="(isLoading)=>{this.trendLoading = isLoading}"></chart-box>
<div class="no-data-tip" v-if="(!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0)">N/A</div> <div class="no-data-tip" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">N/A</div>
</div> </div>
</div> </div>
<div class="content-col-box"> <div class="content-col-box">
<div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div> <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
<div class="content-col-content"> <div class="content-col-content">
<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap"></chart-box> <chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
<div class="no-data-tip" v-if="!mapLoading && (!map || !map.geoJson || !map.geoJson.geoJson)">N/A</div>
</div> </div>
</div> </div>
</div> </div>
<!--第三行--> <!--第三行-->
<div class="content-row-box"> <div class="content-row-box">
<!--第一个图-->
<div class="content-col-box"> <div class="content-col-box">
<div class="content-col-title"> <div class="content-col-title">
<span>{{$t("dashboard.overview.asset.assetType")}}</span> <span>{{$t("dashboard.overview.asset.assetType")}}</span>
</div> </div>
<div class="content-col-content"> <div class="content-col-content">
<chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" ></chart-box> <chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
<div class="no-data-tip" v-if="assetData.typeStat && assetData.typeStat.length == 0">N/A</div> <div class="no-data-tip" v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">N/A</div>
</div> </div>
</div> </div>
<!--第二个图-->
<div class="content-col-box"> <div class="content-col-box">
<div class="content-col-title"> <div class="content-col-title">
<span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span> <span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
@@ -128,10 +131,11 @@
</el-dropdown> </el-dropdown>
</div> </div>
<div class="content-col-content"> <div class="content-col-content">
<chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage"></chart-box> <chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
<div class="no-data-tip" v-if="(!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0)">N/A</div> <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>
</div> </div>
</div> </div>
<!--第三个图-->
<div class="content-col-box"> <div class="content-col-box">
<div class="content-col-title"> <div class="content-col-title">
<span> <span>
@@ -161,10 +165,10 @@
</el-dropdown> </el-dropdown>
</div> </div>
<div class="content-col-content"> <div class="content-col-content">
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false"></chart-box> <chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false"></chart-box> <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
<div class="no-data-tip" v-show="alertMessageShow == 'asset'" v-if="(!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0)">N/A</div> <div class="no-data-tip" v-show="alertMessageShow == 'asset'" v-if="!assetMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">N/A</div>
<div class="no-data-tip" v-show="alertMessageShow == 'module'" v-if="(!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0)">N/A</div> <div class="no-data-tip" v-show="alertMessageShow == 'module'" v-if="!moduleMessageLoading && ((!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0))">N/A</div>
</div> </div>
</div> </div>
</div> </div>
@@ -202,6 +206,7 @@
//data //data
assetLoading: false, assetLoading: false,
assetTypeLoading: false, //第三行第一个图
assetData: '', assetData: '',
projectLoading: false, projectLoading: false,
projectData: '', projectData: '',
@@ -213,11 +218,16 @@
alertMessageData: '', alertMessageData: '',
alertRuleData: '', alertRuleData: '',
map: null, map: null,
mapLoading: false,
chartSeries: [], chartSeries: [],
trendLoading: false,
assetTypeSeries: [], assetTypeSeries: [],
messageByRuleSeries: [], messageByRuleSeries: [],
ruleMessageLoading: false, //第三行第二个图
messageByAssetSeries: [], messageByAssetSeries: [],
assetMessageLoading: false, //第三行第三个图
messageByModuleSeries: [], messageByModuleSeries: [],
moduleMessageLoading: false, //第三行第三个图
alertRuleStatData: {}, alertRuleStatData: {},
dataCenterMapSeries: [], dataCenterMapSeries: [],
trafficDatacenterData: [], trafficDatacenterData: [],
@@ -274,12 +284,13 @@
}, },
queryAssetData() { queryAssetData() {
this.assetLoading = true; this.assetLoading = true;
this.$refs.assetTypePie.startLoading();
this.$get('overview/assetStat').then(response => { this.$get('overview/assetStat').then(response => {
this.assetLoading = false; this.assetLoading = false;
if (response.code === 200) { if (response.code === 200) {
this.assetData = response.data; this.assetData = response.data;
/*饼图*/ /*饼图*/
this.$refs.assetTypePie.startLoading();
let legendData = []; let legendData = [];
let typeSeriesData = []; let typeSeriesData = [];
//let modelSeriesData = []; //let modelSeriesData = [];
@@ -452,6 +463,7 @@
queryAlertTrendData() { queryAlertTrendData() {
this.$refs.chartbox.startLoading(); this.$refs.chartbox.startLoading();
this.chartSeries = []; this.chartSeries = [];
this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response=>{ this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response=>{
if(response.status == 'success'){ if(response.status == 'success'){
if(response.data.result){ if(response.data.result){
@@ -468,8 +480,10 @@
}); });
} }
this.chartSeries.push(series); this.chartSeries.push(series);
this.$refs.chartbox.setSeries(this.chartSeries); if (this.chartSeries.length == 2) {
this.$refs.chartbox.endLoading(); this.$refs.chartbox.setSeries(this.chartSeries);
this.$refs.chartbox.endLoading();
}
} }
}else{ }else{
console.error(response) console.error(response)
@@ -491,8 +505,10 @@
}); });
} }
this.chartSeries.push(series); this.chartSeries.push(series);
this.$refs.chartbox.setSeries(this.chartSeries); if (this.chartSeries.length == 2) {
this.$refs.chartbox.endLoading(); this.$refs.chartbox.setSeries(this.chartSeries);
this.$refs.chartbox.endLoading();
}
} }
}else{ }else{
console.error(response) console.error(response)
@@ -632,7 +648,9 @@
return params; return params;
}, },
queryMapChartGeoJson() { queryMapChartGeoJson() {
this.$refs.dataCenterMap.startLoading();
this.$get('/sysConfig?paramKey=geoJson').then(response=>{ this.$get('/sysConfig?paramKey=geoJson').then(response=>{
this.$refs.dataCenterMap.endLoading();
if(response.code == 200){ if(response.code == 200){
this.map={ this.map={
name:'Kazakhstan', name:'Kazakhstan',
@@ -640,6 +658,7 @@
} }
setTimeout(()=>{this.queryDataCenterMapData();},200) setTimeout(()=>{this.queryDataCenterMapData();},200)
}else{ }else{
this.$refs.dataCenterMap.endLoading();
console.error('loading map info faild') console.error('loading map info faild')
} }
}) })
@@ -726,9 +745,9 @@
}) })
}, },
queryAlertStatByRule() { queryAlertStatByRule() {
this.$refs.ruleMessage.startLoading();
this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => { this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$refs.ruleMessage.startLoading();
let seriesData = []; let seriesData = [];
let categoryData = []; let categoryData = [];
response.data.list.forEach(item => { response.data.list.forEach(item => {
@@ -748,9 +767,9 @@
}); });
}, },
queryAlertStatByAsset() { queryAlertStatByAsset() {
this.$refs.assetMessage.startLoading();
this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => { this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$refs.assetMessage.startLoading();
let seriesData = []; let seriesData = [];
let categoryData = []; let categoryData = [];
response.data.list.forEach(item => { response.data.list.forEach(item => {
@@ -770,9 +789,9 @@
}); });
}, },
queryAlertStatByModule() { queryAlertStatByModule() {
this.$refs.moduleMessage.startLoading();
this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => { this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$refs.moduleMessage.startLoading();
let seriesData = []; let seriesData = [];
let categoryData = []; let categoryData = [];
response.data.list.forEach(item => { response.data.list.forEach(item => {