From e2ed75410ecd9c9924d100453d74711541a489ae Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Wed, 24 Aug 2022 16:50:18 +0800
Subject: [PATCH] =?UTF-8?q?CN-668:=20601=E8=A1=A8=E6=A0=BC=EF=BC=8C?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E6=97=A0=E6=95=B0=E6=8D=AE=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=EF=BC=9B=E5=AF=B9npm=E5=88=86=E6=95=B0?=
 =?UTF-8?q?=E4=B8=BA-=E7=9A=84=E8=BF=9B=E8=A1=8C=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=EF=BC=885=E9=A1=B9=E4=B8=AD=EF=BC=8C=E6=97=A0=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=9A=84=E4=BD=BF=E7=94=A80=E4=BB=A3=E6=9B=BF?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Header.vue              |  2 +-
 .../networkOverview/NetworkOverviewTabs.vue   | 64 ++++++++++++-------
 .../charts2/charts/npm/NpmAppEventTable.vue   | 14 +++-
 3 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index cc93c8c4..a2e5ea2a 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -149,7 +149,7 @@
 <script>
 import { useRoute } from 'vue-router'
 import { get, put } from '@/utils/http'
-import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, drillDownPanelTypeMapping } from '@/utils/constants'
+import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 import { getNowTime, getSecond } from '@/utils/date-util'
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index 4cd9ae70..73bc5d2d 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -57,12 +57,20 @@
                   <template v-else-if="item.columnType === tableColumnType.dillDown" >
                     <div class="data-click" @click="handleTabValue(item.label,scope.row['tab'])">{{scope.row['tab']}}</div>
                   </template>
+                  <template v-else-if="item.prop === 'score'" >
+                    {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}}
+                  </template>
                   <template v-else>
                     {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
                   </template>
                 </template>
               </el-table-column>
             </template>
+            <template v-slot:empty>
+              <div class="table-no-data" v-show="isNoData">
+                <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+              </div>
+            </template>
           </el-table>
 
         </el-tab-pane>
@@ -149,12 +157,13 @@
 </template>
 <script>
 import { ref } from 'vue'
-import { operationType, unitTypes, networkTable, tableColumnType, cycle } from '@/utils/constants'
+import { operationType, unitTypes, networkTable, tableColumnType } from '@/utils/constants'
 import { get } from '@/utils/http'
 import unitConvert from '@/utils/unit-convert'
 import { getChainRatio, computeScore } from '@/utils/tools'
 import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 
 export default {
   name: 'NetworkOverviewTabs',
@@ -167,6 +176,8 @@ export default {
       tab: 'ip',
       unitConvert,
       unitTypes,
+      networkTable,
+      isNoData: false,
       options: [
         {
           value: 'Bits/s',
@@ -190,7 +201,7 @@ export default {
       columnNameGroup: {},
       cycleColumnNameGroup: {},
       metricUnit: 'bytes',
-      loading: false,
+      //loading: false,
       tableColumnType: tableColumnType,
       curTable: {}, // 当前的表格类型
       tableType: '',
@@ -206,7 +217,7 @@ export default {
     chart: Object
   },
   components: {
-
+    ChartNoData
   },
   watch: {
     chartData: {
@@ -235,7 +246,6 @@ export default {
             q: condition
           }
         }
-        this.toggleLoading(true)
         this.$emit('getChartData', this.getCurUrl(), queryParams)
       }
     }
@@ -331,7 +341,6 @@ export default {
           q: condition
         }
       }
-      this.toggleLoading(true)
       this.$emit('getChartData', this.getCurUrl(), queryParams)
     },
     handleCustomizeButton (status) {
@@ -462,6 +471,14 @@ export default {
         })
         return otherData
       })
+
+      this.toggleLoading(false)
+      if(!this.chartData || this.chartData.length === 0){
+        this.isNoData = true
+      }else {
+        this.isNoData = false
+      }
+
       const queryParams = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime)
@@ -526,8 +543,10 @@ export default {
           }).finally(e => {
             this.tableData = tableDataTmp
             // 查询需要单独查询的，且需要展示环比图标，列的当前周期的数据
+            let scoreNum = 0
             this.customTableTitles.forEach(tableColumn => {
               if (tableColumn.columnType === tableColumnType.chainRatio && !tableColumn.isInMainUrl) {
+                scoreNum++
                 get(self.gerColumnUrl(tableColumn), queryParams).then(response => {
                   if (response.code === 200) {
                     const columnList = response.data.result
@@ -540,24 +559,25 @@ export default {
                           score = computeScore(data, tableColumn.scoreType)
                         }
                         item.scoreGroup = item.scoreGroup ? [...item.scoreGroup, score] : [score]
-                        if (item && item.scoreGroup && item.scoreGroup.length >= 5) {
-                          // self.tableData.forEach(data => {
-                          let score = 0
-                          item.scoreGroup.forEach(i => {
-                            score = Number(score) + Number(i)
-                          })
-                          score = Math.ceil(score * 6)
-                          if (score > 6) {
-                            score = 6
-                          }
-                          item.score = score || 0
+                      }else {
+                        item.scoreGroup = item.scoreGroup ? [...item.scoreGroup, 0] : [0]
+                      }
+                      if (scoreNum >= 5) {
+                        // self.tableData.forEach(data => {
+                        let score = 0
+                        item.scoreGroup.forEach(i => {
+                          score = Number(score) + Number(i)
+                        })
+                        score = Math.ceil(score * 6)
+                        if (score > 6) {
+                          score = 6
                         }
+                        item.score = score || 0
                       }
                     })
                   }
                 }).catch(e => {
                   console.log(e)
-                  self.toggleLoading(false)
                 }).finally(e => {
                   // 查询需要单独查询的，且需要展示环比图标，列的前一周期的数据
                   if (tableColumn.cycle && self.tableData && self.tableData.length > 0) {
@@ -611,18 +631,16 @@ export default {
                       console.log(e)
                     })
                   }
-                  self.toggleLoading(false)
                 })
               }
             })
-            self.toggleLoading(false)
           })
         }
       })
-
-      self.toggleLoading(false)
     },
     tabChange (index) {
+      this.toggleLoading(true)
+      this.isNoData = false
       const beforeType = this.$store.getters.getTabOperationBeforeType
       if (beforeType != operationType.thirdMenu) {
         this.$store.commit('setTabOperationBeforeType', this.$store.getters.getTabOperationType)
@@ -663,7 +681,6 @@ export default {
           q: condition
         }
       }
-      this.toggleLoading(true)
       this.$emit('getChartData', this.getCurUrl(), queryParams)
     },
     handleTabValue (columnName, columnValue) {
@@ -864,6 +881,7 @@ export default {
       }
     },
     handleQueryParams (extraParams) {
+      this.toggleLoading(true)
       let queryType = ''
       const name = this.$store.getters.getBreadcrumbColumnName
       let tabList = this.$store.getters.getNetworkOverviewTabList
@@ -989,7 +1007,7 @@ export default {
   mounted () {
     // 当前表格相关数据初始化
     this.tableType = this.chart.params ? this.chart.params.name : 'networkOverview'
-    this.curTable = networkTable[this.tableType] ? networkTable[this.tableType] : networkTable.networkOverview
+    this.curTable = this.networkTable[this.tableType] ? this.networkTable[this.tableType] : this.networkTable.networkOverview
     this.hasMetricSearch = this.curTable.hasMetricSearch
     this.customTableTitles = this.$_.cloneDeep(this.curTable.column)
     this.list = this.$_.cloneDeep(this.curTable.tabList)
diff --git a/src/views/charts2/charts/npm/NpmAppEventTable.vue b/src/views/charts2/charts/npm/NpmAppEventTable.vue
index 00886f4d..b8633b0e 100644
--- a/src/views/charts2/charts/npm/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/npm/NpmAppEventTable.vue
@@ -70,6 +70,11 @@
           </template>
         </el-table-column>
       </template>
+      <template v-slot:empty>
+        <div class="table-no-data" v-show="isNoData">
+          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+        </div>
+      </template>
     </el-table>
   </div>
 </template>
@@ -114,7 +119,8 @@ export default {
         { label: 'network.severity', prop: 'eventSeverity' },
         { label: 'network.eventType', prop: 'eventType' },
         { label: 'network.eventCount', prop: 'count' }
-      ]
+      ],
+      isNoData: false,
     }
   },
   mixins: [chartMixin],
@@ -132,6 +138,7 @@ export default {
   methods: {
     init () {
       this.toggleLoading(true)
+      this.isNoData = false
       this.customTableTitles[0].prop = this.typePropMap[this.metric]
       this.customTableTitles[0].label = this.typeLabelMap[this.metric]
       this.tableData = []
@@ -143,8 +150,13 @@ export default {
       }
       get(api.npm.events.dimensionEvents, params).then(res => {
         if (res.code === 200) {
+          if (!res.data.result || res.data.result.length === 0) {
+            this.isNoData = true
+          }
           this.tableData = res.data.result
           console.log(res.data.result)
+        }else {
+          this.isNoData = true
         }
       }).finally(() => {
         this.toggleLoading(false)