feat:overview 添加过滤 & 部分列表页默认加载10条数据的bug修复

1.overview asset topN 添加过滤下拉选
2.overview 字体修改为rem
3.部分列表页在不改变pageSize的情况下默认加载10条数据的bug修复

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

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
       }
 

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
       }
 

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 {

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
       }
 

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
       }
 

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
       }
 

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
       }
 

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

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

@@ -31,18 +31,7 @@
           <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 :pop-data="assetStatData" ref="assetTab" ></table-box>
-                  <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>
@@ -63,7 +52,15 @@
             </div>
             <div class="content-row-box">
               <div class="content-col-box box-height-300 "style="flex: 3">
-                <table-box :pop-data="topNStatData" ref="topNTab"></table-box>
+                <div class="avg-children-space">
+                  <el-select v-model="topNFilter.default" placeholder="" size="mini" style="display: inline-block;width: 200px" @change="topNChange">
+                    <el-option v-for="(item,index) in topNFilter.options" :label="item.label" :value="item.value" :key="item.value+index"></el-option>
+                  </el-select>
+                  <el-select v-model="topNFilter.defaultTop" placeholder="" size="mini" style="display: inline-block;width: 100px" @change="topNChange">
+                    <el-option v-for="(item,index) in topNFilter.tops" :label="item.label" :value="item.value" :key="item.value+index"></el-option>
+                  </el-select>
+                </div>
+                <table-box :pop-data="topNStatData" ref="topNTab" style="height: 90%;"></table-box>
               </div>
               <div class="content-col-box box-height-300 "style="flex: 8;"></div>
               <div class="content-col-box box-height-300 "style="flex: 2;">
@@ -88,14 +85,24 @@
     data(){
       return {
         assetStatData:{},
-        typeFilter:{
+        typeFilter: 'typeStat',
-          show:false,
-          type:'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(){
+      getAssetTabTitle:function(){
-        this.typeFilter.show=true;
+        switch (this.typeFilter) {
-        console.log(this.typeFilter.show)
+          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(){
+      assetRenderHeader:function(h, { column, $index }){ //修改header为dropdown
-        // this.typeFilter.show=false;
+        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+'<i class="el-icon-arrow-down el-icon--right"></i>'
+                    }
+                  }
+                ),
+                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(){

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{

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"
               >
-                <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" >
@@ -76,7 +74,6 @@
                   </template>
                 </template>
               </el-table-column>
-
             </el-table>
           </div>
         </template>
@@ -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);
         }
       }
     }