CN-668: 601表格，处理无数据相关显示；对npm分数为-的进行处理（5项中，无数据的使用0代替）

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'

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) {
+                      }else {
-                          // self.tableData.forEach(data => {
+                        item.scoreGroup = item.scoreGroup ? [...item.scoreGroup, 0] : [0]
-                          let score = 0
+                      }
-                          item.scoreGroup.forEach(i => {
+                      if (scoreNum >= 5) {
-                            score = Number(score) + Number(i)
+                        // self.tableData.forEach(data => {
-                          })
+                        let score = 0
-                          score = Math.ceil(score * 6)
+                        item.scoreGroup.forEach(i => {
-                          if (score > 6) {
+                          score = Number(score) + Number(i)
-                            score = 6
+                        })
-                          }
+                        score = Math.ceil(score * 6)
-                          item.score = score || 0
+                        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)

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)