feat:overview 填充table组件

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'
       }
     }
   },

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;
+}

nezha-fronted/src/components/page/dashboard/overview/overview.vue

@@ -31,18 +31,44 @@
           <el-scrollbar style="height: 100%" ref="overviewScrollbar">
             <div class="content-row-box" >
               <div class="content-col-box box-height-200 " style="flex:3;">
-                <table-box :pop-data="assetStatData" ref="assetTab"></table-box>
+                <table-box :pop-data="assetStatData" ref="assetTab">
+                  <div :slot="this.$t('dashboard.overview.asset.assetType')+'-header'" class="mini-button" @click="showTypeFilter" >
+                    <span class="mini-button-icon"><i class="nz-icon mini-font nz-icon-arrow-down" ></i></span>
+                    <div v-show="this.typeFilter.show">
+                      <ul>
+                        <li>1</li>
+                        <li>2</li>
+                        <li>3</li>
+                      </ul>
+                    </div>
+                  </div>
+                </table-box>
+              </div>
+              <div class="content-col-box box-height-200 " style="flex: 2">
+                <table-box :pop-data="projectStatData" ref="projectTab"></table-box>
+              </div>
+              <div class="content-col-box box-height-200 " style="flex:1;">
+                <table-box :pop-data="endpointStatData" ref="endpointTab"></table-box>
               </div>
-              <div class="content-col-box box-height-200 " style="flex: 2"></div>
-              <div class="content-col-box box-height-200 " style="flex:1;"></div>
             </div>
             <div class="content-row-box">
-              <div class="content-col-box box-height-250 " style="flex: 1;"></div>
+              <div class="content-col-box box-height-250 " style="flex: 1;">
+                <div class="flex-container">
+                  <div style="flex: 2;">
+                    <table-box :pop-data="dataCenterStatData" ref="dataCenterTab"></table-box>
+                  </div>
+                  <div style="flex: 3;"></div>
+                </div>
+              </div>
             </div>
             <div class="content-row-box">
-              <div class="content-col-box box-height-300 "style="flex: 3"></div>
+              <div class="content-col-box box-height-300 "style="flex: 3">
-              <div class="content-col-box box-height-300 "style="flex: 5;"></div>
+                <table-box :pop-data="topNStatData" ref="topNTab"></table-box>
-              <div class="content-col-box box-height-300 "style="flex: 2"></div>
+              </div>
+              <div class="content-col-box box-height-300 "style="flex: 8;"></div>
+              <div class="content-col-box box-height-300 "style="flex: 2;">
+                <table-box :pop-data="alertRuleStatData" ref="alertRuleTab" ></table-box>
+              </div>
             </div>
           </el-scrollbar>
         </div>
@@ -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();
     }
   }
 </script>

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: '';
+}
 

nezha-fronted/src/components/page/dashboard/overview/tableBox.vue

@@ -1,78 +1,86 @@
 <template>
-    <div class="table-box">
+    <div class="table-box" :class="{'table-column-box':showData&&showData.screen&&showData.screen.direction=='column'}">
       <loading ref="loading"></loading>
-        <div class="table-box-left">
+      <template v-if="showData&&showData.screen">
-          <div class="table-screen" v-show="showData.screen.show">
+        <div class="table-box-left" v-show="showData.screen.show">
-            <div class="screen-top" v-show="showData.screen.total.show">
+            <div class="table-screen"  :class="{'fill-flex-cavity':!showData.screen.stat.show&&showData.screen.total.direction != 'column'}">
-              <div class="screen-row">
+              <div class="screen-top" v-show="showData.screen.total.show" >
-                <div class="screen-col"><i class="nz-icon nz-icon-asset super-icon"></i></div>
+                <div :class="{'screen-row':showData.screen.total.direction == 'row','screen-column':showData.screen.total.direction == 'column'}">
-                <div class="screen-col">
+                  <div class="screen-col"><i class="super-icon" :class="showData.screen.total.icon"></i></div>
-                  <div>{{showData.screen.total.title}}</div>
+                  <div class="screen-col">
-                  <template v-if="showData.screen.total.showPopover">
+                    <div>{{showData.screen.total.title}}</div>
-                    <el-popover trigger="hover" placement="top">
+                    <template v-if="showData.screen.total.showPopover">
+                      <el-popover trigger="hover" placement="top">
+                        <div class="popover-container">
+                          <div v-for="(pop,index) in showData.screen.total.popover">
+                            <span>{{pop.label}}:</span>&nbsp;
+                            <span>{{pop.value}}</span>
+                          </div>
+                        </div>
+                        <template slot="reference">
+                          <div class="super-font">{{showData.screen.total.num}}</div>
+                        </template>
+                      </el-popover>
+                    </template>
+                    <template v-else>
+                      <div class="super-font">{{showData.screen.total.num}}</div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+              <div class="screen-bottom" v-show="showData.screen.stat.show">
+                <div class="screen-row">
+                  <div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-up middle-icon green-icon"></i><span class="middle-font">{{showData.screen.stat.up}}</span></div>
+                  <div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-down middle-icon red-icon"></i><span class="middle-font">{{showData.screen.stat.down}}</span></div>
+                </div>
+              </div>
+            </div>
+        </div>
+      </template>
+        <template v-if="showData&&showData.table">
+          <div class="table-box-right overview-table" v-show="showData.table.show">
+            <el-table
+              class="overview-table"
+              :data="showData.table.tableData"
+              v-scrollBar:el-table
+              height="100%"
+            >
+              <el-table-column
+                :resizable="false"
+                v-for="(item, index) in showData.table.tableLabel"
+                v-if="item.show"
+                :key="`col-${index}`"
+                :label="item.label"
+                show-overflow-tooltip
+                min-width="90"
+              >
+                <template slot="header" slot-scope="scope">
+                  {{item.label}}<slot :name="item.label+'-header'"></slot>
+                </template>
+                <template slot-scope="scope" :column="item">
+                  <template v-if="item.showPopover">
+                    <el-popover trigger="hover" placement="right" >
                       <div class="popover-container">
-                        <div v-for="(pop,index) in showData.screen.total.popover">
+                        <div v-for="(pop,index) in item.popover">
                           <span>{{pop.label}}:</span>&nbsp;
-                          <span>{{pop.value}}</span>
+                          <span>{{scope.row[pop.prop]}}</span>
                         </div>
                       </div>
                       <template slot="reference">
-                        <div class="super-font">{{showData.screen.total.num}}</div>
+                        <span>{{scope.row[item.prop]}}</span>
                       </template>
                     </el-popover>
                   </template>
                   <template v-else>
-                    <div class="super-font">{{showData.screen.total.num}}</div>
+                    {{scope.row[item.prop]}}
                   </template>
-                </div>
-              </div>
-            </div>
-            <div class="screen-bottom" v-show="showData.screen.stat.show">
-              <div class="screen-row">
-                <div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-up middle-icon green-icon"></i><span class="middle-font">{{showData.screen.stat.up}}</span></div>
-                <div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-down middle-icon red-icon"></i><span class="middle-font">{{showData.screen.stat.down}}</span></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="table-box-right overview-table" v-show="showData.table.show">
-          <el-table
-            class="overview-table"
-            :data="showData.table.tableData"
-            v-scrollBar:el-table
-            height="100%"
-          >
-            <el-table-column
-              :resizable="false"
-              v-for="(item, index) in showData.table.tableLabel"
-              v-if="item.show"
-              :key="`col-${index}`"
-              :label="item.label"
-              show-overflow-tooltip
-              min-width="110px"
-            >
-              <template slot-scope="scope" :column="item">
-                <template v-if="item.showPopover">
-                  <el-popover trigger="hover" placement="right" >
-                    <div class="popover-container">
-                      <div v-for="(pop,index) in item.popover">
-                        <span>{{pop.label}}:</span>&nbsp;
-                        <span>{{scope.row[pop.prop]}}</span>
-                      </div>
-                    </div>
-                    <template slot="reference">
-                      <span>{{scope.row[item.prop]}}</span>
-                    </template>
-                  </el-popover>
                 </template>
-                <template v-else>
+              </el-table-column>
-                  {{scope.row[item.prop]}}
+
-                </template>
+            </el-table>
-              </template>
+          </div>
-            </el-table-column>
+        </template>
 
-          </el-table>
-        </div>
     </div>
 </template>
 
@@ -92,7 +100,10 @@
             total:{ //左侧上方大图标及total信息
               show:true,
               num:0,
-              title:''
+              title:'',
+              showPopover:true,
+              icon:'0',
+              popover:[]
             },
             stat:{//左侧下方 小图标，
               show:true,