fix: npm模块下文件请求做error处理

src/views/charts2/charts/npm/NpmAppEventTable.vue

@@ -1,40 +1,41 @@
 <template>
   <div class="npm-app-event">
-    <div class="metric-select" >
-      <el-select v-model="metric"
-                 class="option__select select-column"
-                 popper-class="option-popper common-select"
-                 :popper-append-to-body="false"
-                 key="tabMetric"
-                 @change="changeMetric"
-                 size="mini"
-                 width="100">
+    <div class="metric-select">
+      <el-select
+          v-model="metric"
+          class="option__select select-column"
+          popper-class="option-popper common-select"
+          :popper-append-to-body="false"
+          key="tabMetric"
+          @change="changeMetric"
+          size="mini"
+          width="100">
         <el-option
-                v-for="item in options"
-                :key="item.label"
-                :label="item.label"
-                :value="item.value"
+            v-for="item in options"
+            :key="item.label"
+            :label="item.label"
+            :value="item.value"
         />
       </el-select>
-      <span>{{$t('network.metric')}}：</span>
+      <span>{{ $t('network.metric') }}：</span>
     </div>
     <el-table
-            :id="`tabTable_${index}`"
-            :ref="`dataTable_${index}`"
-            :data="tableData"
-            class="npm-app-event-table"
-            height="100%"
-            empty-text=""
+        :id="`tabTable_${index}`"
+        :ref="`dataTable_${index}`"
+        :data="tableData"
+        class="npm-app-event-table"
+        height="100%"
+        empty-text=""
     >
       <template v-for="(item, index) in customTableTitles" :key="index">
         <el-table-column class="data-column" :min-width="columnWidth(index)">
           <template #header>
-            <span class="data-column__span">{{$t(item.label)}}</span>
+            <span class="data-column__span">{{ $t(item.label) }}</span>
           </template>
-          <template  #default="scope" :column="item">
+          <template #default="scope" :column="item">
             <div class="data-app-event-table">
               <template v-if="item.prop === 'domain' ||item.prop === 'appName' ||item.prop === 'serverIp' ">
-                <span class="data-applications">{{$t(scope.row[item.prop])}}</span>
+                <span class="data-applications">{{ $t(scope.row[item.prop]) }}</span>
               </template>
               <template v-else-if="item.prop === 'eventSeverity'">
                 <template v-if="scope.row[item.prop]==='critical'">
@@ -56,14 +57,14 @@
                   <div v-for="item in 1" class="red-dot"></div>
                   <div v-for="item in 4" class="grey-dot"></div>
                 </template>
-                <span class="data-severity" >{{$t(scope.row[item.prop])}}</span>
+                <span class="data-severity">{{ $t(scope.row[item.prop]) }}</span>
               </template>
               <template v-else-if="item.prop === 'eventType'">
-               <!-- <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>-->
-                <span class="data-eventType" >{{$t(scope.row[item.prop])}}</span>
+                <!-- <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>-->
+                <span class="data-eventType">{{ $t(scope.row[item.prop]) }}</span>
               </template>
               <template v-else-if="item.prop === 'count'">
-                <span class="data-eventCount">{{scope.row[item.prop]}}</span>
+                <span class="data-eventCount">{{ scope.row[item.prop] }}</span>
               </template>
               <span v-else>-</span>
             </div>
@@ -76,20 +77,23 @@
         </div>
       </template>
     </el-table>
+
+    <div class="table-error">
+      <chart-error></chart-error>
+    </div>
   </div>
 </template>
 
 <script>
-import { unitTypes, npmCategoryInfoMapping } from '@/utils/constants'
-import unitConvert from '@/utils/unit-convert'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
-import { getChainRatio, computeScore } from '@/utils/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
+import ChartError from '@/components/common/Error'
 
 export default {
   name: 'NpmAppEventTable',
+  components: { ChartError },
   data () {
     return {
       metric: 'appLabel',
@@ -115,18 +119,32 @@ export default {
       dotList: ['grey-dot', 'grey-dot', 'grey-dot', 'grey-dot', 'grey-dot'],
       tableData: [],
       customTableTitles: [
-        { label: 'network.applications', prop: 'serverIp' },
-        { label: 'network.severity', prop: 'eventSeverity' },
-        { label: 'network.eventType', prop: 'eventType' },
-        { label: 'network.eventCount', prop: 'count' }
+        {
+          label: 'network.applications',
+          prop: 'serverIp'
+        },
+        {
+          label: 'network.severity',
+          prop: 'eventSeverity'
+        },
+        {
+          label: 'network.eventType',
+          prop: 'eventType'
+        },
+        {
+          label: 'network.eventCount',
+          prop: 'count'
+        }
       ],
-      isNoData: false
+      isNoData: false,
+      showError: false,
+      errorMsg: ''
     }
   },
   mixins: [chartMixin],
   watch: {
     timeFilter: {
-      handler (n) {
+      handler () {
         this.init()
       }
     }
@@ -142,20 +160,28 @@ export default {
       this.customTableTitles[0].label = this.typeLabelMap[this.metric]
       this.tableData = []
       const params = {
-        startTime: getSecond(this.timeFilter.startTime),
+        startTime: true,
+        // startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         limit: 10,
         type: this.metric
       }
       get(api.npm.events.dimensionEvents, params).then(res => {
         if (res.code === 200) {
+          this.showError = false
           if (!res.data.result || res.data.result.length === 0) {
             this.isNoData = true
           }
           this.tableData = res.data.result
         } else {
-          this.isNoData = true
+          this.isNoData = false
+          this.showError = true
+          this.errorMsg = res.message
         }
+      }).catch((e) => {
+        this.isNoData = false
+        this.showError = true
+        this.errorMsg = e.message
       }).finally(() => {
         this.toggleLoading(false)
       })
@@ -172,9 +198,7 @@ export default {
         return '15%'
       }
     }
-
   },
-  computed: {
-  }
+  computed: {}
 }
 </script>