CN-671 Dashboard - 多维度表格优化:列数值和环比靠中间对齐;表格增加“show more”，接口请求50条，默认展示10条，点击show more加载全部;增加列排序功能;

src/assets/css/components/views/charts2/networkOverviewTabs.scss

@@ -1,7 +1,7 @@
 .tabs {
   $blue: #2C72C6;
   $grey: #353636;
-  height:100%;
+  height:calc(100% - 64px);
   font-size:12px;
   .tab-hide{
     margin-top:40px;
@@ -12,7 +12,7 @@
       height:100%;
       border: 1px solid #E2E5EC;;
       padding:1px;
-      border-radius: 4px;
+      border-radius: 4px 4px 0 0;
       .tab-table {
         border:0px;
         .data-click:hover{
@@ -21,12 +21,22 @@
       }
       .data-total{
         display: flex !important;
+        justify-content:center;
+      }
+      .data-value{
+        display: flex !important;
+        justify-content:right;
+        width:50%;
+      }
+      .data-trend{
+        display: flex;
+        width:50%;
       }
       .data-total-trend {
         display: flex;
+        justify-content:left;
         margin-left: 6px;
         align-items: center;
-        justify-content: center;
         margin-top: 2px;
         border-radius: 10px;
         font-weight:500;
@@ -92,10 +102,15 @@
       height: calc(100% - 40px);
       border:none;
       .el-table__body-wrapper {
-        height: calc(100% - 32px) !important;
+        height: calc(100% - 34px) !important;
       }
     }
   }
+  .cn-chart__tabs-hide-tab {
+    .el-tabs__content {
+      height: 100% !important;
+    }
+  }
   .tab-search {
     position:absolute;
     height:40px;
@@ -270,3 +285,33 @@
   right:200px !important;
   transform: translateY(126px) !important;*/
 }
+.fixed-row {
+  display:flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 2px;
+  width: 100%;
+  height:40px;
+  border:solid 1px #E2E5EC;
+  padding-left:10px !important;
+  text-align: left;
+  border-top:0px;
+  border-radius:0 0 4px 4px;
+  color:#046eca;
+  .fixed-button {
+    display:flex;
+    justify-content: center;
+    padding:7px 10px;
+    align-items: center;
+    height: 30px;
+  }
+  .fixed-button:hover {
+    cursor:pointer;
+    background: #e6f4ff;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    border-radius: 4px;
+  }
+}
+.btn-up{
+  margin-top:40px;
+}

src/utils/constants.js

@@ -688,13 +688,15 @@ export const networkTable = {
     panelIdOfThirdMenu: drillDownPanelTypeMapping.npmThirdMenu,
     bytesColumnNameGroup: bytesColumnNameGroupForNpm,
     packetsColumnNameGroup: {}, // 无metric下拉列表条件，用不到此属性
-    sessionsColumnNameGroup: {},// 无metric下拉列表条件，用不到此属性
+    sessionsColumnNameGroup: {}, // 无metric下拉列表条件，用不到此属性
     bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp,
     packetsCycleColumnNameGroup: {},
     sessionsCycleColumnNameGroup: {}
   }
 }
 
+export const networkDefaultLimit = 50
+
 export const dnsServerRole = {
   RTDNS: 'RTDNS',
   TLDNS: 'TLDNS',

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="tabs">
+  <div class="tabs" :style="showTabs?'':'height: calc(100% - 104px);'">
     <el-tabs v-model="activeTab"
-             class="cn-chart__tabs"
+             :class="showTabs?'cn-chart__tabs':'tab-hide cn-chart__tabs cn-chart__tabs-hide-tab'"
-             :class="showTabs?'':'tab-hide'"
              @tab-click="handleClick"
     >
       <template v-for="(tab,index) in list">
@@ -18,17 +17,21 @@
           <el-table
                   :id="`tabTable_${index}`"
                   :ref="`dataTable_${index}`"
-                  :data="tableData"
+                  :data="tableData.slice(0,showRecordNum)"
                   border
                   :cell-style="tableCellStyle"
                   :header-cell-style="tableHeaderCellStyle"
                   class="tab-table"
                   height="100%"
+                  :default-sort="{ prop: 'date', order: 'descending' }"
                   empty-text=" "
           >
             <template v-for="(item,index) in customTableTitles">
               <el-table-column
                       v-if="item.checked"
+                      sortable
+                      align="center"
+                      :prop="item.prop"
                       class="data-column"
               >
                 <template #header>
@@ -37,21 +40,25 @@
                 <template  #default="scope" :column="item">
                   <template v-if="item.columnType === tableColumnType.chainRatio"  >
                     <div class="data-total" >
-                      {{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
+                      <div class="data-value">
-                      <template v-if="scope.row[item.prop]">
+                        {{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
-                        <div v-if="scope.row[item.prop][1] === 'up'" class="data-total-trend data-total-trend-red">
+                      </div>
-                          <i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row[item.prop][2]}}</span>
+                      <div class="data-trend">
-                        </div>
+                        <template v-if="scope.row[item.prop]">
-                        <div v-else-if="scope.row[item.prop][1] === 'down'" class="data-total-trend data-total-trend-green">
+                          <div v-if="scope.row[item.prop][1] === 'up'" class="data-total-trend data-total-trend-red">
-                          <i class="cn-icon-decline cn-icon"></i><span>{{scope.row[item.prop][2]}}</span>
+                            <i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row[item.prop][2]}}</span>
-                        </div>
+                          </div>
-                        <div v-else-if="scope.row[item.prop][1] === 'noChange'" class="data-total-trend data-total-trend-black">
+                          <div v-else-if="scope.row[item.prop][1] === 'down'" class="data-total-trend data-total-trend-green">
-                          <i class="cn-icon-constant cn-icon"></i>
+                            <i class="cn-icon-decline cn-icon"></i><span>{{scope.row[item.prop][2]}}</span>
-                        </div>
+                          </div>
-                      </template>
+                          <div v-else-if="scope.row[item.prop][1] === 'noChange'" class="data-total-trend data-total-trend-black">
-                      <template  v-else>
+                            <i class="cn-icon-constant cn-icon"></i>
-                        -
+                          </div>
-                      </template>
+                        </template>
+                        <template  v-else>
+                          -
+                        </template>
+                      </div>
                     </div>
                   </template>
                   <template v-else-if="item.columnType === tableColumnType.dillDown" >
@@ -72,10 +79,9 @@
               </div>
             </template>
           </el-table>
-
         </el-tab-pane>
-      </template>
 
+      </template>
     </el-tabs>
     <div class="tab-search" >
       <div class="search-select"  v-if="hasMetricSearch">
@@ -151,13 +157,14 @@
         </el-tabs>
       </el-popover>
     </div>
-
   </div>
-
+  <div class="fixed-row">
+    <div class="fixed-button" :class="showTabs?'':''" @click="showMore" >{{$t('network.showTop50Results')}}</div>
+  </div>
 </template>
 <script>
 import { ref } from 'vue'
-import { operationType, unitTypes, networkTable, tableColumnType } from '@/utils/constants'
+import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit } from '@/utils/constants'
 import { get } from '@/utils/http'
 import unitConvert from '@/utils/unit-convert'
 import { getChainRatio, computeScore } from '@/utils/tools'
@@ -197,11 +204,12 @@ export default {
       networkTabList: [], // 原始状态列表
       showBackground: false,
       tableData: [],
+      showRecordNum: 10,
       showTabs: true,
       columnNameGroup: {},
       cycleColumnNameGroup: {},
       metricUnit: 'bytes',
-      //loading: false,
+      // loading: false,
       tableColumnType: tableColumnType,
       curTable: {}, // 当前的表格类型
       tableType: '',
@@ -234,14 +242,14 @@ export default {
         const curTab = this.getCurTab()
         let queryParams = {
           orderBy: this.orderBy,
-          limit: 10,
+          limit: networkDefaultLimit,
           type: curTab.prop
         }
         const condition = this.$store.getters.getQueryCondition
         if (condition) {
           queryParams = {
             orderBy: this.orderBy,
-            limit: 10,
+            limit: networkDefaultLimit,
             type: curTab.prop,
             q: condition
           }
@@ -252,6 +260,14 @@ export default {
   },
   mixins: [chartMixin],
   methods: {
+    showMore () {
+      this.showRecordNum = 50
+    },
+    rowClass (row, column, rowIndex, columnIndex) {
+      if (rowIndex === 49) {
+        return 'fixed-row'
+      }
+    },
     changeMetric () {
       const beforeType = this.$store.getters.getTabOperationBeforeType
       if (beforeType != operationType.thirdMenu) {
@@ -329,14 +345,14 @@ export default {
       }
       let queryParams = {
         orderBy: this.orderBy,
-        limit: 10,
+        limit: networkDefaultLimit,
         type: curTab.prop
       }
       const condition = this.$store.getters.getQueryCondition
       if (condition) {
         queryParams = {
           orderBy: this.orderBy,
-          limit: 10,
+          limit: networkDefaultLimit,
           type: curTab.prop,
           q: condition
         }
@@ -357,6 +373,22 @@ export default {
         return tabObjGroup = this.networkTabList.filter(item => item.checked)[0]
       }
     },
+    // 隐藏tabs的标题
+    hideTabs (curTab) {
+      // 此处的id为tab-name
+      this.list.forEach(item => {
+        const tabDom = document.getElementById('tab-' + item.label)
+        const paneDom = document.getElementById('pane-' + item.label)
+        if (tabDom) {
+          tabDom.style.display = 'none'
+        }
+        if (paneDom) {
+          if (curTab.label === item.label) {
+            paneDom.style.display = ''
+          }
+        }
+      })
+    },
     initData () {
       const curTab = this.getCurTab()
       const columnName = this.$store.getters.getBreadcrumbColumnName
@@ -377,19 +409,7 @@ export default {
         }
         this.showTabs = true
       } else if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
-        // 此处的id为tab-name
+        this.hideTabs(curTab)
-        this.list.forEach(item => {
-          const tabDom = document.getElementById('tab-' + item.label)
-          const paneDom = document.getElementById('pane-' + item.label)
-          if (tabDom) {
-            tabDom.style.display = 'none'
-          }
-          if (paneDom) {
-            if (curTab.label === item.label) {
-              paneDom.style.display = ''
-            }
-          }
-        })
         this.customTableTitles[0].label = curTab.label
         this.showTabs = false
       } else if (curOperationType === operationType.fourthMenu) { // 点击的为第四级菜单
@@ -411,36 +431,14 @@ export default {
       } else if (curOperationType === operationType.changeMetric) { // 切换metric
         const beforeOperationType = this.$store.getters.getTabOperationBeforeType
         if (beforeOperationType === operationType.thirdMenu) {
-          this.list.forEach(item => {
+          this.hideTabs(curTab)
-            const tabDom = document.getElementById('tab-' + item.label)
-            const paneDom = document.getElementById('pane-' + item.label)
-            if (tabDom) {
-              tabDom.style.display = 'none'
-            }
-            if (paneDom) {
-              if (curTab.label === item.label) {
-                paneDom.style.display = ''
-              }
-            }
-          })
           this.customTableTitles[0].label = curTab.label
           this.showTabs = false
         }
       } else if (curOperationType === operationType.customize) { // customize
         const beforeOperationType = this.$store.getters.getTabOperationBeforeType
         if (beforeOperationType === operationType.thirdMenu) {
-          this.list.forEach(item => {
+          this.hideTabs(curTab)
-            const tabDom = document.getElementById('tab-' + item.label)
-            const paneDom = document.getElementById('pane-' + item.label)
-            if (tabDom) {
-              tabDom.style.display = 'none'
-            }
-            if (paneDom) {
-              if (curTab.label === item.label) {
-                paneDom.style.display = ''
-              }
-            }
-          })
           this.customTableTitles[0].label = curTab.label
           this.showTabs = false
         } else {
@@ -472,10 +470,10 @@ export default {
         return otherData
       })
 
-      if(!this.chartData || this.chartData.length === 0){
+      if (!this.chartData || this.chartData.length === 0) {
         this.isNoData = true
         this.toggleLoading(false)
-      }else {
+      } else {
         this.isNoData = false
       }
 
@@ -560,7 +558,7 @@ export default {
                           score = computeScore(data, tableColumn.scoreType)
                         }
                         item.scoreGroup = item.scoreGroup ? [...item.scoreGroup, score] : [score]
-                      }else {
+                      } else {
                         item.scoreGroup = item.scoreGroup ? [...item.scoreGroup, 0] : [0]
                       }
                       if (scoreNum >= 5) {
@@ -671,14 +669,14 @@ export default {
 
       let queryParams = {
         orderBy: this.orderBy,
-        limit: 10,
+        limit: networkDefaultLimit,
         type: tabList[0].prop
       }
       const condition = this.$store.getters.getQueryCondition
       if (condition) {
         queryParams = {
           orderBy: this.orderBy,
-          limit: 10,
+          limit: networkDefaultLimit,
           type: tabList[0].prop,
           q: condition
         }
@@ -842,14 +840,14 @@ export default {
 
         let queryParams = {
           orderBy: this.orderBy,
-          limit: 10,
+          limit: networkDefaultLimit,
           type: curTab.prop
         }
         const condition = this.$store.getters.getQueryCondition
         if (condition) {
           queryParams = {
             orderBy: this.orderBy,
-            limit: 10,
+            limit: networkDefaultLimit,
             type: curTab.prop,
             q: condition
           }
@@ -970,7 +968,7 @@ export default {
         extraParams = {
           type: queryType || this.networkTabList[0].prop,
           orderBy: this.orderBy ? this.orderBy : 'bytesTotal',
-          limit: 10
+          limit: networkDefaultLimit
         }
         const condition = this.$store.getters.getQueryCondition
         if (condition) {
@@ -1033,18 +1031,7 @@ export default {
       this.customTableTitles[0].label = curTab.label
       this.showTabs = false
       this.$nextTick(() => {
-        this.list.forEach(item => {
+        this.hideTabs(curTab)
-          const tabDom = document.getElementById('tab-' + item.label)
-          const paneDom = document.getElementById('pane-' + item.label)
-          if (tabDom) {
-            tabDom.style.display = 'none'
-          }
-          if (paneDom) {
-            if (curTab.label === item.label) {
-              paneDom.style.display = ''
-            }
-          }
-        })
       })
     }
     this.$nextTick(() => {