From b15613aa91c238deb7acee9fed8d8bd35965fed9 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Tue, 30 Aug 2022 09:34:38 +0800
Subject: [PATCH] =?UTF-8?q?CN-671=20=20Dashboard=20-=20=E5=A4=9A=E7=BB=B4?=
 =?UTF-8?q?=E5=BA=A6=E8=A1=A8=E6=A0=BC=E4=BC=98=E5=8C=96=EF=BC=9A=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9tab=E6=97=B6=EF=BC=8C=E4=B8=8D=E9=87=8D=E6=96=B0?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=8E=A5=E5=8F=A3=EF=BC=9B=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E6=8C=89=E9=92=AE=E5=9C=A8=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=90=8E=E6=B6=88=E5=A4=B1=E5=8A=9F=E8=83=BD=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/networkOverviewTabs.scss    | 18 ++++-
 .../networkOverview/NetworkOverviewTabs.vue   | 74 ++++++++++++-------
 .../charts2/charts/npm/NpmAppEventTable.vue   |  4 +-
 3 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
index b7fc2785..b531bfe5 100644
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -18,6 +18,20 @@
           cursor: pointer;
         }
       }
+      .tab-table__average {
+        border: 1px solid #E2E5EC;
+        border-radius: 4px 4px 0 0;
+        padding: 1px;
+        .data-click:hover{
+          cursor: pointer;
+        }
+        .el-table__body {
+          height:100%;
+        }
+      }
+      .tab-table__no-bottom {
+        border-radius: 4px !important;
+      }
       .data-total{
         display: flex !important;
         justify-content:center;
@@ -101,7 +115,7 @@
       height: calc(100% - 40px);
       border:none;
       .el-table__body-wrapper {
-        height: calc(100% - 34px) !important;
+        height: calc(100% - 30px) !important;
       }
     }
   }
@@ -289,13 +303,11 @@
   justify-content: flex-start;
   align-items: center;
   background: white;
-  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 {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index 6cb5c38c..3253888f 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="tabs" :style="showTabs?'':'height: calc(100% - 104px);'">
+  <div class="tabs" :style="showTabs ? (tableData.length > 10 && showRecordNum === 10 ? 'height: calc(100% - 40px);'
+                                                                                      : 'height: calc(100% - 2px)')
+                                     : (tableData.length > 10 && showRecordNum === 10 ? 'height: calc(100% - 104px);'
+                                                                                      : 'height: calc(100% - 66px);')">
     <el-tabs v-model="activeTab"
              :class="showTabs?'cn-chart__tabs':'tab-hide cn-chart__tabs cn-chart__tabs-hide-tab'"
              @tab-click="handleClick"
@@ -21,7 +24,7 @@
                   border
                   :cell-style="tableCellStyle"
                   :header-cell-style="tableHeaderCellStyle"
-                  class="tab-table"
+                  :class="tableClass"
                   height="100%"
                   :default-sort="{ prop: 'date', order: 'descending' }"
                   empty-text=" "
@@ -158,8 +161,8 @@
       </el-popover>
     </div>
   </div>
-  <div class="fixed-row">
-    <div class="fixed-button" :class="showTabs?'':''" @click="showMore" >{{$t('network.showTop50Results')}}</div>
+  <div class="fixed-row" v-if="tableData.length > 10 && showRecordNum===10 ">
+    <div class="fixed-button" @click="showMore" >{{$t('network.showTop50Results')}}</div>
   </div>
 </template>
 <script>
@@ -258,6 +261,20 @@ export default {
       }
     }
   },
+  computed: {
+    tableClass () {
+      let className
+      if (this.showRecordNum >= 10) {
+        className = 'tab-table__average'
+      } else {
+        className = 'tab-table'
+      }
+      if (!(this.tableData.length > 10 && this.showRecordNum === 10)) {
+        className = 'tab-table tab-table__no-bottom'
+      }
+      return className
+    }
+  },
   mixins: [chartMixin],
   methods: {
     showMore () {
@@ -269,6 +286,7 @@ export default {
       }
     },
     changeMetric () {
+      this.showRecordNum = 10
       const beforeType = this.$store.getters.getTabOperationBeforeType
       if (beforeType != operationType.thirdMenu) {
         this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
@@ -638,26 +656,21 @@ export default {
       })
     },
     tabChange (index) {
-      this.tableData = []
-      this.toggleLoading(true)
+      // this.tableData = []
+      // this.toggleLoading(true)
       this.isNoData = false
+      // 操作类型设置
       const beforeType = this.$store.getters.getTabOperationBeforeType
       if (beforeType != operationType.thirdMenu) {
         this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
       }
       this.$store.commit('setTabOperationType', operationType.customize)
+      // 获得操作tab和当前选中的所有tab
       const handleTab = this.list[index]
       const tabList = this.list.filter(item => item.checked === true)
       const defaultTab = tabList.length > 0 ? tabList[0] : {}
-      if (handleTab.label === defaultTab.label && handleTab.checked) {
-        this.activeTab = handleTab.label
-        this.customTableTitles.forEach(item => {
-          if (item.tabColumn) {
-            item.label = handleTab.label
-          }
-        })
-      }
-      if (tabList.length === 1) { // 当前操作之后，只有1个tab被选中，则这一个不允许取消选中
+      // 当前操作之后，只有1个tab被选中，则这一个不允许取消选中
+      if (tabList.length === 1) {
         defaultTab.disabled = true
       } else if (tabList.length > 1) {
         this.list.forEach(item => {
@@ -665,23 +678,27 @@ export default {
         })
       }
 
-      this.$store.commit('setNetworkOverviewCurrentTab', tabList[0])
-
-      let queryParams = {
-        orderBy: this.orderBy,
-        limit: networkDefaultLimit,
-        type: tabList[0].prop
-      }
-      const condition = this.$store.getters.getQueryCondition
-      if (condition) {
-        queryParams = {
+      // 如果取消tab，则如果取消的是当前选中的tab，则当前tab就需要修改为第一个默认的tab，否则不用
+      const curTab = this.getCurTab()
+      if (!handleTab.checked && handleTab.label === curTab.label) {
+        this.showRecordNum = 10
+        this.$store.commit('setNetworkOverviewCurrentTab', tabList[0])
+        let queryParams = {
           orderBy: this.orderBy,
           limit: networkDefaultLimit,
-          type: tabList[0].prop,
-          q: condition
+          type: tabList[0].prop
         }
+        const condition = this.$store.getters.getQueryCondition
+        if (condition) {
+          queryParams = {
+            orderBy: this.orderBy,
+            limit: networkDefaultLimit,
+            type: tabList[0].prop,
+            q: condition
+          }
+        }
+        this.$emit('getChartData', this.getCurUrl(), queryParams)
       }
-      this.$emit('getChartData', this.getCurUrl(), queryParams)
     },
     handleTabValue (columnName, columnValue) {
       const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
@@ -828,6 +845,7 @@ export default {
     },
     handleClick (tab) {
       this.tableData = []
+      this.showRecordNum = 10
       this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
       this.$store.commit('setTabOperationType', operationType.changeTab)
       this.customTableTitles[0].label = tab.paneName
diff --git a/src/views/charts2/charts/npm/NpmAppEventTable.vue b/src/views/charts2/charts/npm/NpmAppEventTable.vue
index b8633b0e..36363e47 100644
--- a/src/views/charts2/charts/npm/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/npm/NpmAppEventTable.vue
@@ -120,7 +120,7 @@ export default {
         { label: 'network.eventType', prop: 'eventType' },
         { label: 'network.eventCount', prop: 'count' }
       ],
-      isNoData: false,
+      isNoData: false
     }
   },
   mixins: [chartMixin],
@@ -155,7 +155,7 @@ export default {
           }
           this.tableData = res.data.result
           console.log(res.data.result)
-        }else {
+        } else {
           this.isNoData = true
         }
       }).finally(() => {