diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 95b1d6d3d..5031939c1 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -185,6 +185,8 @@ const en = { asset:{ title:'Asset', assetType:'Asset Type', + modelStat:'Model Stat', + dcStat:'DataCenter Stat', num:'Num', alert:'Alert', alertLow:'Low', @@ -194,7 +196,12 @@ const en = { outStock:'Out Stock', pingUp:'Up', pingDown:'Down', - host:'Host' + host:'Host', + dropDownLabel:{ + type:'type', + model:'model', + dc:'dataCenter' + } }, project:{ project:'Project', @@ -211,7 +218,10 @@ const en = { level:'Level', alertRule:'Alert Rule', ruleNum:'Rule Num', - alertNum:'Alert Num' + alertNum:'Alert Num', + alertRuleTopN:'According to Alert Rule', + assetTopN:'According to Asset', + top:'Top' } } }, diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue index dfbf64edf..5f2857415 100644 --- a/nezha-fronted/src/components/page/alert/config.vue +++ b/nezha-fronted/src/components/page/alert/config.vue @@ -408,7 +408,7 @@ mounted() { //是否存在分页缓存 let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); - if (pageSize != 'undefined') { + if (pageSize != 'undefined' && pageSize != null) { this.pageObj.pageSize = pageSize } diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue index 7212458ac..404d07070 100644 --- a/nezha-fronted/src/components/page/alert/list.vue +++ b/nezha-fronted/src/components/page/alert/list.vue @@ -361,7 +361,7 @@ mounted() { //是否存在分页缓存 let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); - if (pageSize != 'undefined') { + if (pageSize != 'undefined' && pageSize != null) { this.pageObj.pageSize = pageSize } diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue index f8786f199..cb378ba21 100644 --- a/nezha-fronted/src/components/page/asset/asset.vue +++ b/nezha-fronted/src/components/page/asset/asset.vue @@ -774,10 +774,10 @@ mounted() { //是否存在分页缓存 let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); - if (pageSize != 'undefined') { + if (pageSize != 'undefined' && pageSize != null) { this.pageObj.pageSize = pageSize } - + console.log('pageSize:'+this.pageObj.pageSize) this.$nextTick(() => { //左侧dc列表初始选中状态 if (this.$store.state.assetData.selectedData.length > 0) { @@ -788,7 +788,6 @@ let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper"); if (el._ps_) { el.addEventListener("ps-scroll-y", () => { - console.info(el._ps_.scrollbarYTop) if (el._ps_.scrollbarYTop > 50) { this.showTopBtn = true; } else { diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue index 51261845f..22f94871a 100644 --- a/nezha-fronted/src/components/page/config/account.vue +++ b/nezha-fronted/src/components/page/config/account.vue @@ -516,7 +516,7 @@ mounted() { //是否存在分页缓存 let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); - if (pageSize != 'undefined') { + if (pageSize != 'undefined' && pageSize != null) { this.pageObj.pageSize = pageSize } diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue index 850d2cf00..252f3dc3b 100644 --- a/nezha-fronted/src/components/page/config/dc.vue +++ b/nezha-fronted/src/components/page/config/dc.vue @@ -566,7 +566,7 @@ mounted() { //是否存在分页缓存 let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); - if (pageSize != 'undefined') { + if (pageSize != 'undefined' && pageSize != null) { this.pageObj.pageSize = pageSize } diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue index f33a2bb9e..950cfb6a0 100644 --- a/nezha-fronted/src/components/page/config/model.vue +++ b/nezha-fronted/src/components/page/config/model.vue @@ -277,7 +277,7 @@ mounted: function () { //是否存在分页缓存 let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); - if (pageSize != 'undefined') { + if (pageSize != 'undefined' && pageSize != null) { this.pageObj.pageSize = pageSize } diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue index acb94a350..75b96328c 100644 --- a/nezha-fronted/src/components/page/config/promServer.vue +++ b/nezha-fronted/src/components/page/config/promServer.vue @@ -647,7 +647,7 @@ mounted: function () { //是否存在分页缓存 let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); - if (pageSize != 'undefined') { + if (pageSize != 'undefined' && pageSize != null) { this.pageObj.pageSize = pageSize } diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.scss b/nezha-fronted/src/components/page/dashboard/overview/overview.scss index 9f6ab37cb..25b68c05b 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview.scss +++ b/nezha-fronted/src/components/page/dashboard/overview/overview.scss @@ -10,7 +10,7 @@ flex:13; height: 35px; line-height: 35px; - font-size: 24px !important; + font-size: 1.5rem !important; font-weight: 700; margin-left: 15px; } @@ -24,7 +24,7 @@ } .tool-container .time{ flex: 4; - font-size: 24px !important; + font-size: 1.5rem !important; font-weight: 700; display: inline-block; height: 35px; @@ -36,12 +36,12 @@ height: 35px; } .date .week{ - font-size: 18px; + font-size: 1.125rem; font-weight: bold; } .date .sys-date{ padding-top: 5px; - font-size: 12px; + font-size: .75rem; } .tool-container .operation{ flex: 2; @@ -49,7 +49,7 @@ line-height: 35px; } .operation .nz-icon-maxview{ - font-size: 30px !important; + font-size: 1.875rem !important; } .overview-content{ height: calc(100% - 45px); @@ -103,7 +103,12 @@ cursor: pointer; } .mini-font{ - font-size: 12px; + font-size: .75rem; -webkit-transform:scale(0.7); display: inline-block; } +.avg-children-space{ + display: flex; + align-items: center; + justify-content: space-between; +} diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue index cf626404f..b095c0209 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue @@ -31,18 +31,7 @@
- -
- -
-
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
-
-
- +
@@ -63,7 +52,15 @@
- +
+ + + + + + +
+
@@ -88,14 +85,24 @@ data(){ return { assetStatData:{}, - typeFilter:{ - show:false, - type:'typeStat' - }, + typeFilter: 'typeStat', projectStatData:{}, endpointStatData:{}, dataCenterStatData:{}, topNStatData:{}, + topNFilter:{ + default:'alertRule', + defaultTop:10, + options:[ + {label:this.$t('dashboard.overview.alert.alertRuleTopN'),value:'alertRule'}, + {label:this.$t('dashboard.overview.alert.assetTopN'),value:'asset'}, + ], + tops:[ + {label:this.$t('dashboard.overview.alert.top')+'10',value:10}, + {label:this.$t('dashboard.overview.alert.top')+'20',value:20}, + {label:this.$t('dashboard.overview.alert.top')+'50',value:50}, + ] + }, alertRuleStatData:{}, sysTime:'', sysDate:'', @@ -111,7 +118,7 @@ this.queryProjectData(); this.queryEndpointData(); this.queryDataCenterData(); - this.queryAlertTopNData(); + this.topNChange(); this.queryAlertRuleStatData(); }, queryAssetData:function(){ @@ -119,7 +126,7 @@ axios.get('/overview/assetStat').then((res)=>{ let response=res.data; if(response.msg == 'success'){ - let showData=response.data.typeStat; + let showData=response.data[this.typeFilter]; this.assetStatData=this.formatAssetData(showData,response.data.totalStat); this.$refs.assetTab.endLoading(); }else{ @@ -174,9 +181,10 @@ tableData:data, tableLabel:[ { - label:this.$t('dashboard.overview.asset.assetType'), + label:this.getAssetTabTitle(), prop:'name', - show:true + show:true, + renderHeader:this.assetRenderHeader, }, { label:this.$t('dashboard.overview.asset.num'), @@ -471,7 +479,7 @@ }, queryAlertTopNData:function(){ this.$refs.topNTab.startLoading(); - this.$get('/overview/alertStatByRule?top=10').then(response=>{ + this.$get('/overview/alertStatByRule?top='+this.topNFilter.defaultTop).then(response=>{ if(response.msg == 'success') { let showData = response.data.list; this.topNStatData = this.formatAlertTopNData(showData); @@ -537,7 +545,7 @@ }, queryAssetTopNData:function(){ this.$refs.topNTab.startLoading(); - this.$get('/overview/alertStatByAsset?top=10').then(response=>{ + this.$get('/overview/alertStatByAsset?top='+this.topNFilter.defaultTop).then(response=>{ if(response.msg == 'success') { let showData=response.data.list; this.topNStatData=this.formatAssetTopNData(showData); @@ -662,12 +670,76 @@ } }, /*加载数据 end*/ - showTypeFilter:function(){ - this.typeFilter.show=true; - console.log(this.typeFilter.show) + getAssetTabTitle:function(){ + switch (this.typeFilter) { + case "typeStat": + return this.$t('dashboard.overview.asset.assetType'); + case "modelStat": + return this.$t('dashboard.overview.asset.modelStat'); + case "dcStat": + return this.$t('dashboard.overview.asset.dcStat'); + } }, - closeTypeFilter:function(){ - // this.typeFilter.show=false; + assetRenderHeader:function(h, { column, $index }){ //修改header为dropdown + let filters = [ + {text:this.$t('dashboard.overview.asset.dropDownLabel.type'),value:'typeStat'}, + {text:this.$t('dashboard.overview.asset.dropDownLabel.model'),value:'modelStat'}, + {text:this.$t('dashboard.overview.asset.dropDownLabel.dc'),value:'dcStat'}, + ]; + return h('div', + { + + }, + [ + h('el-dropdown', + { + attrs:{ + trigger:'click' + } + }, + [ + h('span', + { + domProps: { + innerHTML: column.label+'' + } + } + ), + h('el-dropdown-menu', + { + attrs:{ + slot:'dropdown' + } + }, + [ + filters.map(item => { + return h("el-dropdown-item", { + domProps: { + innerHTML:item.text + }, + nativeOn:{ + click:this.assetTabFilterChange.bind(this,item.value) + } + }); + }) + ] + ) + ] + ) + ] + ) + + }, + assetTabFilterChange:function(type){ + this.typeFilter=type; + this.queryAssetData(); + }, + topNChange:function(){ + if(this.topNFilter.default == 'alertRule'){ + this.queryAlertTopNData(); + }else if(this.topNFilter.default == 'asset'){ + this.queryAssetTopNData(); + } }, /*header 时间处理 start*/ initDate:function(){ diff --git a/nezha-fronted/src/components/page/dashboard/overview/tableBox.scss b/nezha-fronted/src/components/page/dashboard/overview/tableBox.scss index c500d518d..1f952c9f5 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/tableBox.scss +++ b/nezha-fronted/src/components/page/dashboard/overview/tableBox.scss @@ -43,14 +43,14 @@ text-align: center; } .super-icon{ -font-size: 80px !important; +font-size:5rem !important; } .middle-font{ - font-size: 30px !important; + font-size: 1.875rem !important; font-weight: 600; } .middle-icon{ - font-size: 30px !important; + font-size: 1.875rem !important; font-weight: 700; margin-right: 5px; } @@ -60,7 +60,7 @@ font-size: 80px !important; justify-content: center; } .super-font{ - font-size: 40px !important; + font-size: 2.5rem !important; font-weight: 700; } .red-icon{ diff --git a/nezha-fronted/src/components/page/dashboard/overview/tableBox.vue b/nezha-fronted/src/components/page/dashboard/overview/tableBox.vue index 569cfae58..edd14db43 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/tableBox.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/tableBox.vue @@ -51,12 +51,10 @@ v-if="item.show" :key="`col-${index}`" :label="item.label" + :render-header="item.renderHeader" show-overflow-tooltip min-width="90" > - -
@@ -136,7 +133,8 @@ immediate:true, deep:true, handler(n,o){ - this.showData=JSON.parse(JSON.stringify(n)); + // this.showData=JSON.parse(JSON.stringify(n)); + this.showData=Object.assign({},n); } } }