diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index e2c2f0d59..95b1d6d3d 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -185,7 +185,7 @@ const en = { asset:{ title:'Asset', assetType:'Asset Type', - num:'Nun', + num:'Num', alert:'Alert', alertLow:'Low', alertMedium:'Medium', @@ -194,7 +194,24 @@ const en = { outStock:'Out Stock', pingUp:'Up', pingDown:'Down', - + host:'Host' + }, + project:{ + project:'Project', + name:'Name', + module:'Module', + endpoint:'Endpoint', + }, + dataCenter:{ + dataCenter:'DataCenter', + cabinet:'Cabinet', + promServer:'Prom Server', + }, + alert:{ + level:'Level', + alertRule:'Alert Rule', + ruleNum:'Rule Num', + alertNum:'Alert Num' } } }, diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.scss b/nezha-fronted/src/components/page/dashboard/overview/overview.scss index db96e1423..9f6ab37cb 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview.scss +++ b/nezha-fronted/src/components/page/dashboard/overview/overview.scss @@ -55,7 +55,6 @@ height: calc(100% - 45px); width: 100%; } -/*100份*/ .overview-content .content-row-box{ width: 99%; display: flex; @@ -68,6 +67,12 @@ margin: 10px; display: inline-block; } + +.flex-container{ + display: flex; + height: 100%; +} + .box-height-200{ height: 200px; } @@ -86,4 +91,19 @@ .box-height-500{ height: 500px; } - +.mini-button{ + display: inline-block; + //visibility: hidden; +} +.mini-button .mini-button-icon{ + visibility: hidden; +} +.mini-button:hover .mini-button-icon{ + visibility: visible; + cursor: pointer; +} +.mini-font{ + font-size: 12px; + -webkit-transform:scale(0.7); + display: inline-block; +} diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue index ec2e5d2de..cf626404f 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue @@ -31,18 +31,44 @@
- + +
+ +
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+
+ +
+
+ +
+
+
-
-
-
+
+
+
+ +
+
+
+
-
-
-
+
+ +
+
+
+ +
@@ -62,6 +88,15 @@ data(){ return { assetStatData:{}, + typeFilter:{ + show:false, + type:'typeStat' + }, + projectStatData:{}, + endpointStatData:{}, + dataCenterStatData:{}, + topNStatData:{}, + alertRuleStatData:{}, sysTime:'', sysDate:'', sysWeek:'', @@ -71,14 +106,24 @@ }, methods:{ /*加载数据 start*/ + initData:function(){ + this.queryAssetData(); + this.queryProjectData(); + this.queryEndpointData(); + this.queryDataCenterData(); + this.queryAlertTopNData(); + this.queryAlertRuleStatData(); + }, queryAssetData:function(){ - // this.$refs.assetTab.startLoading(); + this.$refs.assetTab.startLoading(); axios.get('/overview/assetStat').then((res)=>{ let response=res.data; if(response.msg == 'success'){ let showData=response.data.typeStat; this.assetStatData=this.formatAssetData(showData,response.data.totalStat); - // this.$refs.assetTab.endLoading(); + this.$refs.assetTab.endLoading(); + }else{ + this.$message.error(response.msg) } }) }, @@ -87,11 +132,14 @@ let assetStatData={ screen:{ //左侧概览信息 show:true, + direction:'row', total:{ //左侧上方大图标及total信息 show:true, + direction:'row', num:totalData.total, title:this.$t('dashboard.overview.asset.title'), showPopover:true, + icon:'nz-icon nz-icon-asset', popover:[ { label:this.$t('dashboard.overview.asset.inStock'), @@ -179,12 +227,448 @@ } return assetStatData; }else{ - return {}; console.error('the param is invalid'); + return {}; } }, + queryProjectData:function(){ + this.$refs.projectTab.startLoading(); + this.$get('/overview/projectStat').then(response=>{ + if(response.msg == 'success'){ + let showData=response.data; + this.projectStatData=this.formatProjectData(showData); + this.$refs.projectTab.endLoading(); + }else{ + this.$message.error(response.msg) + } + }) + }, + formatProjectData:function(data){ + if(data){ + return { + screen:{ //左侧概览信息 + show:true, + direction:'row', + total:{ //左侧上方大图标及total信息 + show:true, + direction:'row', + num:data.total, + title:this.$t('dashboard.overview.project.project'), + showPopover:false, + icon:'nz-icon nz-icon-project', + popover:[] + }, + stat:{//左侧下方 小图标， + show:false, + up:0, + down:0 + } + }, + table:{//右侧table + show:true, + tableData:data.projectStat, + tableLabel:[ + { + label:this.$t('dashboard.overview.project.name'), + prop:'name', + show:true, + showPopover:true, + popover:[ + { + label:this.$t('dashboard.overview.project.module'), + prop:'moduleNum' + }, + { + label:this.$t('dashboard.overview.project.endpoint'), + prop:'endpointNum' + } + ] + }, + { + label:this.$t('dashboard.overview.asset.alert'), + prop:'alertNum', + show:true, + showPopover: false + } + ] + } + } + }else{ + console.error('the param is invalid'); + return {} + } + }, + queryEndpointData:function(){ + this.$refs.endpointTab.startLoading(); + this.$get('/overview/endpointStat').then(response=>{ + if(response.msg == 'success'){ + let showData=response.data; + this.endpointStatData=this.formatEndpointData(showData); + this.$refs.endpointTab.endLoading(); + }else{ + this.$message.error(response.msg) + } + }) + }, + formatEndpointData:function(data){ + if(data){ + return { + screen:{ //左侧概览信息 + show:true, + direction:'row', + total:{ //左侧上方大图标及total信息 + show:true, + direction:'row', + num:data.total, + title:this.$t('dashboard.overview.project.endpoint'), + showPopover:false, + icon:'nz-icon nz-icon-project', + popover:[] + }, + stat:{//左侧下方 小图标， + show:true, + up:data.up, + down:data.down + } + }, + table:{//右侧table + show:false, + tableData:[], + tableLabel:[] + } + } + }else{ + console.error('the param is invalid'); + return {} + } + }, + queryDataCenterData:function(){ + this.$refs.dataCenterTab.startLoading(); + this.$get('/overview/datacenterStat').then(response=>{ + if(response.msg == 'success') { + let showData = response.data; + this.dataCenterStatData = this.formatDataCenterData(showData); + this.$refs.dataCenterTab.endLoading(); + }else{ + this.$message.error(response.msg) + } + }) + }, + formatDataCenterData:function(data){ + if(data){ + return { + screen:{ //左侧概览信息 + show:true, + direction:'row', + total:{ //左侧上方大图标及total信息 + show:true, + direction:'column', + num:data.dcTotal, + title:this.$t('dashboard.overview.dataCenter.dataCenter'), + showPopover:true, + icon:'nz-icon nz-icon-page', + popover:[ + { + label:this.$t('dashboard.overview.dataCenter.cabinet'), + value:data.cabinetTotal + } + ] + }, + stat:{//左侧下方 小图标， + show:false, + up:0, + down:0 + } + }, + table:{//右侧table + show:true, + tableData:data.dcStat, + tableLabel:[ + { + label:this.$t('dashboard.overview.project.name'), + prop:'name', + show:true, + showPopover:true, + popover:[ + { + label:this.$t('dashboard.overview.asset.pingUp'), + prop:'endpointUp' + }, + { + label:this.$t('dashboard.overview.asset.pingDown'), + prop:'endpointDown' + }, + ] + }, + { + label:this.$t('dashboard.overview.dataCenter.promServer'), + prop:'promTotal', + show:true, + showPopover: true, + popover: [ + { + label:this.$t('dashboard.overview.asset.pingUp'), + prop:'promUp' + }, + { + label:this.$t('dashboard.overview.asset.pingDown'), + prop:'promDown' + }, + ] + }, + { + label:this.$t('dashboard.overview.asset.title'), + prop:'assetTotal', + show:true, + showPopover: true, + popover: [ + { + label:this.$t('dashboard.overview.asset.inStock'), + prop:'assetInStock' + }, + { + label:this.$t('dashboard.overview.asset.outStock'), + prop:'assetOutStock' + }, + { + label:this.$t('dashboard.overview.asset.pingUp'), + prop:'assetPingUp' + }, + { + label:this.$t('dashboard.overview.asset.pingDown'), + prop:'assetPingDown' + }, + ] + }, + { + label:this.$t('dashboard.overview.asset.alert'), + prop:'alertTotal', + show:true, + showPopover: true, + popover: [ + { + label:this.$t('dashboard.overview.asset.alertLow'), + prop:'alertLow' + }, + { + label:this.$t('dashboard.overview.asset.alertMedium'), + prop:'alertMedium' + }, + { + label:this.$t('dashboard.overview.asset.alertHigh'), + prop:'alertHigh' + }, + ] + } + ] + } + } + }else{ + console.error('the param is invalid'); + return {} + } + }, + queryAlertTopNData:function(){ + this.$refs.topNTab.startLoading(); + this.$get('/overview/alertStatByRule?top=10').then(response=>{ + if(response.msg == 'success') { + let showData = response.data.list; + this.topNStatData = this.formatAlertTopNData(showData); + this.$refs.topNTab.endLoading(); + }else{ + this.$message.error(response.msg) + } + }) + }, + formatAlertTopNData:function(data){ + if(data){ + return { + screen:{ //左侧概览信息 + show:false, + direction:'row', + total:{ //左侧上方大图标及total信息 + show:true, + direction:'row', + num:0, + title:'', + showPopover:false, + icon:'', + popover:[] + }, + stat:{//左侧下方 小图标， + show:false, + up:0, + down:0 + } + }, + table:{//右侧table + show:true, + tableData:data, + tableLabel:[ + { + label:this.$t('dashboard.overview.project.name'), + prop:'alertName', + show:true, + showPopover:false, + popover:[] + }, + { + label:this.$t('dashboard.overview.alert.level'), + prop:'level', + show:true, + showPopover:false, + popover:[] + }, + { + label:this.$t('dashboard.overview.asset.num'), + prop:'nums', + show:true, + showPopover:false, + popover:[] + }, + ] + } + } + }else{ + console.error('the param is invalid'); + return {} + } + }, + queryAssetTopNData:function(){ + this.$refs.topNTab.startLoading(); + this.$get('/overview/alertStatByAsset?top=10').then(response=>{ + if(response.msg == 'success') { + let showData=response.data.list; + this.topNStatData=this.formatAssetTopNData(showData); + this.$refs.topNTab.endLoading(); + }else{ + this.$message.error(response.msg) + } + }) + }, + formatAssetTopNData:function(data){ + if(data){ + return { + screen:{ //左侧概览信息 + show:false, + direction:'row', + total:{ //左侧上方大图标及total信息 + show:true, + direction:'row', + num:0, + title:'', + showPopover:false, + icon:'', + popover:[] + }, + stat:{//左侧下方 小图标， + show:false, + up:0, + down:0 + } + }, + table:{//右侧table + show:true, + tableData:data, + tableLabel:[ + { + label:this.$t('dashboard.overview.asset.host'), + prop:'host', + show:true, + showPopover:false, + popover:[] + }, + + { + label:this.$t('dashboard.overview.asset.num'), + prop:'nums', + show:true, + showPopover:false, + popover:[] + }, + ] + } + } + }else{ + console.error('the param is invalid'); + return {} + } + }, + queryAlertRuleStatData:function(){ + this.$refs.alertRuleTab.startLoading(); + this.$get('/overview/alertRuleStat').then(response=>{ + if(response.msg == 'success') { + let showData=response.data; + this.alertRuleStatData=this.formatAlertRuleData(showData); + this.$refs.alertRuleTab.endLoading(); + }else{ + this.$message.error(response.msg) + } + }) + }, + formatAlertRuleData:function(data){ + if(data){ + return { + screen:{ //左侧概览信息 + show:true, + direction:'column', + total:{ //左侧上方大图标及total信息 + show:true, + direction:'row', + num:data.alertRuleTotal, + title:this.$t('dashboard.overview.alert.alertRule'), + showPopover:false, + icon:'nz-icon nz-icon-page', + popover:[] + }, + stat:{//左侧下方 小图标， + show:false, + up:0, + down:0 + } + }, + table:{//右侧table + show:true, + tableData:data.alertRule, + tableLabel:[ + { + label:this.$t('dashboard.overview.alert.level'), + prop:'level', + show:true, + showPopover:false, + popover:[] + }, + { + label:this.$t('dashboard.overview.alert.ruleNum'), + prop:'ruleNum', + show:true, + showPopover:false, + popover:[] + }, + { + label:this.$t('dashboard.overview.alert.alertNum'), + prop:'alertNum', + show:true, + showPopover:false, + popover:[] + }, + ] + } + } + }else{ + console.error('the param is invalid'); + return {} + } + }, /*加载数据 end*/ + showTypeFilter:function(){ + this.typeFilter.show=true; + console.log(this.typeFilter.show) + }, + closeTypeFilter:function(){ + // this.typeFilter.show=false; + }, /*header 时间处理 start*/ initDate:function(){ this.sysTime=this.getTime(); @@ -245,7 +729,7 @@ }, mounted() { this.initDate(); - this.queryAssetData(); + this.initData(); } } diff --git a/nezha-fronted/src/components/page/dashboard/overview/tableBox.scss b/nezha-fronted/src/components/page/dashboard/overview/tableBox.scss index c836a48d6..c500d518d 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/tableBox.scss +++ b/nezha-fronted/src/components/page/dashboard/overview/tableBox.scss @@ -2,6 +2,10 @@ display: flex; height: 100%; width: 100%; + position: relative; +} +.table-column-box{ + flex-direction: column; } .table-box .table-box-left{ flex: 1; @@ -26,6 +30,14 @@ align-items: center; justify-content: center; } +.table-screen .screen-column{ + display: flex; + flex-direction: column; + height: 100%; + align-items: center; + justify-content: space-around; + text-align: center; +} .screen-row .screen-col{ flex: 1; text-align: center; @@ -63,4 +75,8 @@ popover-container{ .overview-table { background-color: #FCFCFC !important; } +.fill-flex-cavity:after{ + flex:1; + content: ''; +} diff --git a/nezha-fronted/src/components/page/dashboard/overview/tableBox.vue b/nezha-fronted/src/components/page/dashboard/overview/tableBox.vue index eba1002e8..569cfae58 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/tableBox.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/tableBox.vue @@ -1,78 +1,86 @@