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

1.overview asset topN 添加过滤下拉选 2.overview 字体修改为rem 3.部分列表页在不改变pageSize的情况下默认加载10条数据的bug修复
2020-03-20 18:22:44 +08:00
parent 2369bf5d6e
commit cfe0ffef05
12 changed files with 138 additions and 54 deletions
--- 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'
      }
    }
  },
--- 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
      }

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

--- 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 {
--- 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
      }

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

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

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

--- 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;
+}
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/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">
-                  <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>
+                <table-box :pop-data="assetStatData" ref="assetTab" ></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:{
-          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+'<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(){
--- 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{
--- 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"
              >
-                <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);
        }
      }
    }