CN-749 fix: 统一error交互

src/Login.vue

@@ -40,6 +40,7 @@
 <script>
 import { mapActions } from 'vuex'
 import { post, get } from '@/utils/http'
+import axios from 'axios'
 import { useRouter } from 'vue-router'
 import { storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'
@@ -69,21 +70,21 @@ export default {
         return
       }
       this.loading = true
-      post(api.login, { username: this.username, pin: this.pin }).then(
+      axios.post(api.login, { username: this.username, pin: this.pin }).then(
         res => {
-          if (res.code === 200) {
+          if (res.data.code === 200) {
-            if (!_.isEmpty(res.data.lang)) {
+            if (!_.isEmpty(res.data.data.lang)) {
-              localStorage.setItem(storageKey.language, res.data.lang)
+              localStorage.setItem(storageKey.language, res.data.data.lang)
             }
-            if (!_.isEmpty(res.data.theme)) {
+            if (!_.isEmpty(res.data.data.theme)) {
-              localStorage.setItem(storageKey.theme, res.data.theme)
+              localStorage.setItem(storageKey.theme, res.data.data.theme)
             }
             res.loginSuccessPath = this.$route.query.redirect
             this.loginSuccess(res)
             localStorage.setItem(storageKey.username, this.username)
-            localStorage.setItem(storageKey.userId, res.data.userId)
+            localStorage.setItem(storageKey.userId, res.data.data.userId)
-            localStorage.setItem(storageKey.token, res.data.token)
+            localStorage.setItem(storageKey.token, res.data.data.token)
-          } else if (res.code === 518005) {
+          } else if (res.data.code === 518005) {
             this.$message.error(this.$t('Incorrect username or password'))
             this.loading = false
             this.blockOperation.query = false
@@ -97,7 +98,7 @@ export default {
         console.error(e)
         this.loading = false
         this.blockOperation.query = false
-        this.$message.error(this.$t('tip.unknownError'))
+        this.$message.error(this.errorMsgHandler(e))
       })
     },
     queryAppearance () {

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

@@ -17,8 +17,7 @@
       position: absolute;
       width: calc(100% - 20px);
       height: calc(100% - 60px);
-      margin-left: -12px;
+      margin-top: 50px;
-      margin-top: 10px;
     }
     .data-grid {
       height: 100px;

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

@@ -114,6 +114,6 @@
     position: absolute;
     width: 100%;
     left: 0;
-    top: 68px;
+    top: 32px;
   }
 }

src/components/common/Error.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showDefault" class="error-component">
+  <div v-if="showDefault" class="error-component" :style="style" :class="class">
     <div class="error-block" :style="{'max-width': localMaxWidth, 'width': localWidth}">
       <svg class="icon error-icon-default" aria-hidden="true">
         <use xlink:href="#cn-icon-baocuo"></use>
@@ -101,6 +101,12 @@ export default {
     // 自定义svg图标
     svg: {
       type: String
+    },
+    style: {
+      type: String
+    },
+    class: {
+      type: String
     }
   },
   data () {

src/mixins/common.js

@@ -1,5 +1,6 @@
 import { hasButton } from '@/permission'
 import { dateFormatByAppearance } from '@/utils/date-util'
+import { commonErrorTip } from '@/utils/constants'
 export default {
   data () {
     return {
@@ -29,6 +30,16 @@ export default {
     hasButton (code) {
       return hasButton(this.$store.getters.buttonList, code)
     },
+    errorMsgHandler (axiosError) {
+      if (axiosError.response) {
+        if (axiosError.response.data) {
+          return axiosError.response.data.message || commonErrorTip
+        }
+      } else if (axiosError.message) {
+        return axiosError.message
+      }
+      return commonErrorTip
+    },
     isBuiltIn (row) {
       return (row.buildIn && row.buildIn === 1) || (row.builtIn && row.builtIn === 1)
     },

src/utils/constants.js

@@ -121,6 +121,7 @@ export const chartTableColumnMapping = {
   responseFailRate: 'dns.responseFailureRate',
   ip: 'IP'
 }
+export const commonErrorTip = 'Something went wrong...'
 export const chartTableOrderOptionsMapping = {
   lastTime: 'last_time',
   tagName: 'tag_name'

src/views/charts2/charts/linkMonitor/LinkBlock.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="link-blocks">
     <div class="block-list" style="position: relative">
-      <div class="block-list__title" v-if="!showError1">{{ $t('linkMonitor.links') }}</div>
+      <div class="block-list__title">{{ $t('linkMonitor.links') }}</div>
 
       <!--无数据noData-->
       <chart-no-data v-if="linkNoData" test-id="linkBlockNoData"></chart-no-data>
 
-      <div class="block-list__list" v-show="!linkNoData">
+      <chart-error style="top: 40px;" v-show="!linkNoData" v-if="showError1" :content="errorMsg1" />
-        <chart-error v-if="showError1" :content="errorMsg1" />
+      <div class="block-list__list" v-show="!linkNoData" v-else>
         <el-popover
-            v-else
             placement="bottom"
             trigger="hover"
             popper-class="link-block__popper"
@@ -57,14 +56,12 @@
     </div>
 
     <div class="block-list" >
-      <div class="block-list__title" v-if="!showError2">{{ $t('linkMonitor.nextHopInternet') }}</div>
+      <div class="block-list__title">{{ $t('linkMonitor.nextHopInternet') }}</div>
 
       <chart-no-data v-if="nextHopNoData" test-id="nextHpNoData"></chart-no-data>
-
+      <chart-error style="top: 40px;" v-show="!nextHopNoData" class="link-block-error" v-if="showError2" :content="errorMsg2" />
-      <div class="block-list__list" v-show="!nextHopNoData">
+      <div class="block-list__list" v-show="!nextHopNoData" v-else>
-        <chart-error v-if="showError2" :content="errorMsg2" />
         <el-popover
-            v-else
             placement="bottom"
             trigger="hover"
             popper-class="link-block__popper"
@@ -177,133 +174,145 @@ export default {
         endTime: getSecond(this.timeFilter.endTime)
       }
 
-      const dataRequest = axios.get(api.linkMonitor.analysis, { params: params })
+      const dataRequest = axios.get(api.linkMonitor.analysis, { params: params }).catch(e => {
-      const nextHopRequest = axios.get(api.linkMonitor.nextHopAnalysis, { params: params })
+        console.error(e)
+        this.linkNoData = false
+        this.showError1 = true
+        this.errorMsg1 = this.errorMsgHandler(e)
+      })
+      const nextHopRequest = axios.get(api.linkMonitor.nextHopAnalysis, { params: params }).catch(e => {
+        console.error(e)
+        this.nextHopNoData = false
+        this.showError2 = true
+        this.errorMsg2 = this.errorMsgHandler(e)
+      })
 
-      Promise.all([dataRequest, nextHopRequest]).then(response => {
+      axios.all([dataRequest, nextHopRequest]).then(response => {
-        const res = []
+        if (response[0] && response[1]) {
-        res[0] = response[0].data
+          const res = []
-        res[1] = response[1].data
+          res[0] = response[0].data
-        if (res[0].code === 200) {
+          res[1] = response[1].data
-          this.showError1 = false
+          if (res[0].code === 200) {
+            this.showError1 = false
 
-          const linkData = res[0].data.result
+            const linkData = res[0].data.result
 
-          this.linkNoData = linkData.length === 0
+            this.linkNoData = linkData.length === 0
-          if (!this.linkNoData) {
+            if (!this.linkNoData) {
-            const data = []
+              const data = []
-            linkData.forEach(d => {
+              linkData.forEach(d => {
-              const info = linkInfo.find(i => i.originalLinkId === d.linkId)
+                const info = linkInfo.find(i => i.originalLinkId === d.linkId)
-              if (info) {
+                if (info) {
-                const hit = data.find(d => d.linkId === info.linkId)
+                  const hit = data.find(d => d.linkId === info.linkId)
-                if (hit) {
+                  if (hit) {
-                  hit.egressBitsRate += d.egressBitsRate
+                    hit.egressBitsRate += d.egressBitsRate
-                  hit.ingressBitsRate += d.ingressBitsRate
+                    hit.ingressBitsRate += d.ingressBitsRate
-                  if (info.direction === 'egress') {
+                    if (info.direction === 'egress') {
-                    hit.egressBandwidth = info.bandwidth
+                      hit.egressBandwidth = info.bandwidth
-                    hit.egressLinkId = d.linkId
+                      hit.egressLinkId = d.linkId
-                  } else if (info.direction === 'ingress') {
+                    } else if (info.direction === 'ingress') {
-                    hit.ingressBandwidth = info.bandwidth
+                      hit.ingressBandwidth = info.bandwidth
-                    hit.ingressLinkId = d.linkId
+                      hit.ingressLinkId = d.linkId
+                    }
+                  } else {
+                    const hit = {
+                      linkId: info.linkId,
+                      egressBitsRate: d.egressBitsRate,
+                      ingressBitsRate: d.ingressBitsRate
+                    }
+                    if (info.direction === 'egress') {
+                      hit.egressBandwidth = info.bandwidth
+                      hit.egressLinkId = d.linkId
+                    } else if (info.direction === 'ingress') {
+                      hit.ingressBandwidth = info.bandwidth
+                      hit.ingressLinkId = d.linkId
+                    }
+                    data.push(hit)
                   }
-                } else {
-                  const hit = {
-                    linkId: info.linkId,
-                    egressBitsRate: d.egressBitsRate,
-                    ingressBitsRate: d.ingressBitsRate
-                  }
-                  if (info.direction === 'egress') {
-                    hit.egressBandwidth = info.bandwidth
-                    hit.egressLinkId = d.linkId
-                  } else if (info.direction === 'ingress') {
-                    hit.ingressBandwidth = info.bandwidth
-                    hit.ingressLinkId = d.linkId
-                  }
-                  data.push(hit)
-                }
-              }
-            })
-            data.forEach((item) => {
-              item.totalBitsRate = item.egressBitsRate + item.ingressBitsRate
-            })
-
-            const sorted = data.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
-            const linkColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], sorted.map(s => s.totalBitsRate))
-            sorted.forEach((s, i) => {
-              s.color = linkColors[i]
-              s.egressUsage = this.computeUsage(s.egressBitsRate, s.egressBandwidth)
-              s.ingressUsage = this.computeUsage(s.ingressBitsRate, s.ingressBandwidth)
-              s.popoverWidth = this.computePopoverWidth(s.egressUsage, s.ingressUsage)
-            })
-            this.linkData = sorted
-          }
-        } else {
-          this.linkNoData = false
-          this.showError1 = true
-          this.errorMsg1 = res[0].message
-        }
-
-        if (res[1].code === 200) {
-          this.showError2 = false
-
-          const nextHopData = res[1].data.result
-          this.nextHopNoData = nextHopData.length === 0
-          if (!this.nextHopNoData) {
-            let directionArr = []
-            nextHopData.forEach((item) => {
-              if (item.egressLinkDirection !== '' && item.ingressLinkDirection !== '') {
-                directionArr.push(item.egressLinkDirection)
-                directionArr.push(item.ingressLinkDirection)
-              }
-            })
-            directionArr = Array.from(new Set(directionArr))
-
-            const newNextHopData = []
-
-            directionArr.forEach((item1) => {
-              const newObj = { egressBitsRate: 0, ingressBitsRate: 0, totalBitsRate: 0, linkDirection: item1 }
-              nextHopData.forEach((item2) => {
-                if (item1 === item2.egressLinkDirection) {
-                  newObj.egressBitsRate += item2.egressBitsRate
-                  newObj.totalBitsRate += item2.egressBitsRate
-                }
-                if (item1 === item2.ingressLinkDirection) {
-                  newObj.ingressBitsRate += item2.ingressBitsRate
-                  newObj.totalBitsRate += item2.ingressBitsRate
                 }
               })
-              newNextHopData.push(newObj)
+              data.forEach((item) => {
-            })
+                item.totalBitsRate = item.egressBitsRate + item.ingressBitsRate
-
-            // 下一跳数据处理
-            const nextHopSorted = newNextHopData.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
-            const nextHopColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], nextHopSorted.map(s => s.totalBitsRate))
-            nextHopSorted.forEach((s, i) => {
-              s.color = nextHopColors[i]
-
-              let sum = 0
-              linkInfo.forEach((item) => {
-                // todo 此处需注意，不明确接口返回的方向字段名是拼音还是汉字，后期可能会变动缓存中的nextHop
-                if (s.linkDirection === item.nextHop) {
-                  sum += item.bandwidth
-                }
               })
 
-              // 上行使用情况计算
+              const sorted = data.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
-              const egressUsage = this.computeUsage(s.egressBitsRate, sum)
+              const linkColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], sorted.map(s => s.totalBitsRate))
-              // 下行使用情况计算
+              sorted.forEach((s, i) => {
-              const ingressUsage = this.computeUsage(s.ingressBitsRate, sum)
+                s.color = linkColors[i]
-              s.egressUsage = egressUsage
+                s.egressUsage = this.computeUsage(s.egressBitsRate, s.egressBandwidth)
-              s.ingressUsage = ingressUsage
+                s.ingressUsage = this.computeUsage(s.ingressBitsRate, s.ingressBandwidth)
-              s.popoverWidth = this.computePopoverWidth(egressUsage, ingressUsage)
+                s.popoverWidth = this.computePopoverWidth(s.egressUsage, s.ingressUsage)
-            })
+              })
-
+              this.linkData = sorted
-            this.nextHopData = nextHopSorted
+            }
+          } else {
+            this.linkNoData = false
+            this.showError1 = true
+            this.errorMsg1 = res[0].message
+          }
+
+          if (res[1].code === 200) {
+            this.showError2 = false
+
+            const nextHopData = res[1].data.result
+            this.nextHopNoData = nextHopData.length === 0
+            if (!this.nextHopNoData) {
+              let directionArr = []
+              nextHopData.forEach((item) => {
+                if (item.egressLinkDirection !== '' && item.ingressLinkDirection !== '') {
+                  directionArr.push(item.egressLinkDirection)
+                  directionArr.push(item.ingressLinkDirection)
+                }
+              })
+              directionArr = Array.from(new Set(directionArr))
+
+              const newNextHopData = []
+
+              directionArr.forEach((item1) => {
+                const newObj = { egressBitsRate: 0, ingressBitsRate: 0, totalBitsRate: 0, linkDirection: item1 }
+                nextHopData.forEach((item2) => {
+                  if (item1 === item2.egressLinkDirection) {
+                    newObj.egressBitsRate += item2.egressBitsRate
+                    newObj.totalBitsRate += item2.egressBitsRate
+                  }
+                  if (item1 === item2.ingressLinkDirection) {
+                    newObj.ingressBitsRate += item2.ingressBitsRate
+                    newObj.totalBitsRate += item2.ingressBitsRate
+                  }
+                })
+                newNextHopData.push(newObj)
+              })
+
+              // 下一跳数据处理
+              const nextHopSorted = newNextHopData.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
+              const nextHopColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], nextHopSorted.map(s => s.totalBitsRate))
+              nextHopSorted.forEach((s, i) => {
+                s.color = nextHopColors[i]
+
+                let sum = 0
+                linkInfo.forEach((item) => {
+                  // todo 此处需注意，不明确接口返回的方向字段名是拼音还是汉字，后期可能会变动缓存中的nextHop
+                  if (s.linkDirection === item.nextHop) {
+                    sum += item.bandwidth
+                  }
+                })
+
+                // 上行使用情况计算
+                const egressUsage = this.computeUsage(s.egressBitsRate, sum)
+                // 下行使用情况计算
+                const ingressUsage = this.computeUsage(s.ingressBitsRate, sum)
+                s.egressUsage = egressUsage
+                s.ingressUsage = ingressUsage
+                s.popoverWidth = this.computePopoverWidth(egressUsage, ingressUsage)
+              })
+
+              this.nextHopData = nextHopSorted
+            }
+          } else {
+            this.showError2 = true
+            this.nextHopNoData = false
+            this.errorMsg2 = res[1].message
           }
-        } else {
-          this.showError2 = true
-          this.nextHopNoData = false
-          this.errorMsg2 = res[1].message
         }
       }).catch(e => {
         console.error(e)

src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="link-direction-grid">
     <!--左侧链路出入口-->
-    <popover-content :isNoData="isLinkNoData" :gridData="linkGridData" :showError="isLinkShowError" :content="linkErrorMsg" style="width: 900px;"/>
+    <popover-content :title="$t('linkMonitor.egressLink') + ' & ' + $t('linkMonitor.ingressLink')" :isNoData="isLinkNoData" :gridData="linkGridData" :showError="isLinkShowError" :content="linkErrorMsg" style="width: 900px;"/>
 
     <!--右侧链路下一跳-->
-    <popover-content :isNoData="isNextNoData" :gridData="nextGridData" :showError="isNextShowError" :content="nextErrorMsg" />
+    <popover-content :title="$t('linkMonitor.nextHopInternetOfGrid')" :isNoData="isNextNoData" :gridData="nextGridData" :showError="isNextShowError" :content="nextErrorMsg" />
   </div>
 </template>
 
@@ -56,183 +56,185 @@ export default {
         endTime: getSecond(this.timeFilter.endTime)
       }
 
-      const dataRequest = axios.get(api.linkMonitor.bigramAnalysis, { params: params })
+      const dataRequest = axios.get(api.linkMonitor.bigramAnalysis, { params: params }).catch(e => {
-      const nextHopRequest = axios.get(api.linkMonitor.bigramNextHopAnalysis, { params: params })
+        this.isLinkShowError = true
+        this.isLinkNoData = false
+        this.linkErrorMsg = this.errorMsgHandler(e)
+      })
+      const nextHopRequest = axios.get(api.linkMonitor.bigramNextHopAnalysis, { params: params }).catch(e => {
+        this.isNextShowError = true
+        this.isNextNoData = false
+        this.nextErrorMsg = this.errorMsgHandler(e)
+      })
       this.toggleLoading(true)
 
-      Promise.all([dataRequest, nextHopRequest]).then(response => {
+      axios.all([dataRequest, nextHopRequest]).then(response => {
-        const res = []
+        if (response[0] && response[1]) {
-        res[0] = response[0].data
+          const res = []
-        res[1] = response[1].data
+          res[0] = response[0].data
-        if (res[0].code === 200) {
+          res[1] = response[1].data
-          this.isLinkShowError = false
+          if (res[0].code === 200) {
-          // 链路流量数据
+            this.isLinkShowError = false
-          const linkData = res[0].data.result
-          // 接口数据乱序，根据入链路id（ingressLinkId）大小排序之后，
-          // 再根据同ingressLinkId下的egressLinkId进行排序
-          linkData.sort((a, b) => {
-            if (a.ingressLinkId !== b.ingressLinkId) {
-              return a.ingressLinkId - b.ingressLinkId
-            }
-            return a.egressLinkId - b.egressLinkId
-          })
-
-          this.isLinkNoData = linkData.length === 0
-          if (!this.isLinkNoData) {
             // 链路流量数据
-            const linkGridData = []
+            const linkData = res[0].data.result
-            linkData.forEach(d => {
+            // 接口数据乱序，根据入链路id（ingressLinkId）大小排序之后，
-              const ingressLink = linkInfo.find(l => l.originalLinkId === d.ingressLinkId)
+            // 再根据同ingressLinkId下的egressLinkId进行排序
-              const egressLink = linkInfo.find(l => l.originalLinkId === d.egressLinkId)
+            linkData.sort((a, b) => {
-              if (ingressLink && egressLink) {
+              if (a.ingressLinkId !== b.ingressLinkId) {
-                const data = linkGridData.find(g => g.linkId === ingressLink.linkId)
+                return a.ingressLinkId - b.ingressLinkId
-
-                // 上行使用情况计算
-                const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
-                // 下行使用情况计算
-                const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
-                // 宽带使用超过90%，赋红点
-
-                d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
-                // 计算npm分数
-                // 分数低于3分，赋红点
-                d.score = this.localComputeScore(d)
-
-                d.scoreLow3 = d.score < 3 || d.score === '-'
-
-                if (data) {
-                  const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
-                  if (!existedEgressLink) {
-                    data.egress.push({
-                      linkId: egressLink.linkId,
-                      egressUsage: egressUsage,
-                      ingressUsage: ingressUsage,
-                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
-                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
-                      totalBitsRate: d.totalBitsRate,
-                      ...d
-                    })
-                  }
-                } else {
-                  linkGridData.push({
-                    linkId: ingressLink.linkId,
-                    egress: [{
-                      linkId: egressLink.linkId,
-                      egressUsage: egressUsage,
-                      ingressUsage: ingressUsage,
-                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
-                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
-                      totalBitsRate: d.totalBitsRate,
-                      ...d
-                    }]
-                  })
-                }
               }
+              return a.egressLinkId - b.egressLinkId
             })
 
-            this.linkGridData = linkGridData
+            this.isLinkNoData = linkData.length === 0
-          }
+            if (!this.isLinkNoData) {
-        } else {
+              // 链路流量数据
-          this.isLinkNoData = false
+              const linkGridData = []
-          this.isLinkShowError = true
+              linkData.forEach(d => {
-          this.linkErrorMsg = res[0].message
+                const ingressLink = linkInfo.find(l => l.originalLinkId === d.ingressLinkId)
-        }
+                const egressLink = linkInfo.find(l => l.originalLinkId === d.egressLinkId)
+                if (ingressLink && egressLink) {
+                  const data = linkGridData.find(g => g.linkId === ingressLink.linkId)
 
-        if (res[1].code === 200) {
+                  // 上行使用情况计算
-          this.isNextShowError = false
+                  const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
+                  // 下行使用情况计算
+                  const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
+                  // 宽带使用超过90%，赋红点
 
-          // 链路下一跳信息
+                  d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
-          const nextLinkData = res[1].data.result
+                  // 计算npm分数
-          // 接口数据乱序，根据入方向排序，再根据同个入方向下的出方向进行排序
+                  // 分数低于3分，赋红点
-          nextLinkData.sort((a, b) => {
+                  d.score = this.localComputeScore(d)
-            if (a.ingressLinkDirection !== b.ingressLinkDirection) {
+
-              return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection, 'zh')
+                  d.scoreLow3 = d.score < 3 || d.score === '-'
+
+                  if (data) {
+                    const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
+                    if (!existedEgressLink) {
+                      data.egress.push({
+                        linkId: egressLink.linkId,
+                        egressUsage: egressUsage,
+                        ingressUsage: ingressUsage,
+                        popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                        valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
+                        totalBitsRate: d.totalBitsRate,
+                        ...d
+                      })
+                    }
+                  } else {
+                    linkGridData.push({
+                      linkId: ingressLink.linkId,
+                      egress: [{
+                        linkId: egressLink.linkId,
+                        egressUsage: egressUsage,
+                        ingressUsage: ingressUsage,
+                        popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                        valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
+                        totalBitsRate: d.totalBitsRate,
+                        ...d
+                      }]
+                    })
+                  }
+                }
+              })
+              this.linkGridData = linkGridData
             }
-            return a.egressLinkDirection.localeCompare(b.egressLinkDirection, 'zh')
+          } else {
-          })
+            this.isLinkNoData = false
+            this.isLinkShowError = true
+            this.linkErrorMsg = res[0].message
+          }
 
-          this.isNextNoData = nextLinkData.length === 0
+          if (res[1].code === 200) {
-          if (!this.isNextNoData) {
+            this.isNextShowError = false
-            // 链路下一跳数据
-            const nextGridData = []
 
-            nextLinkData.forEach(d => {
+            // 链路下一跳信息
-              const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
+            const nextLinkData = res[1].data.result
-              const egressLink = linkInfo.find(l => l.nextHop === d.egressLinkDirection && l.direction === 'egress')
+            // 接口数据乱序，根据入方向排序，再根据同个入方向下的出方向进行排序
-
+            nextLinkData.sort((a, b) => {
-              if (ingressLink && egressLink) {
+              if (a.ingressLinkDirection !== b.ingressLinkDirection) {
-                const data = nextGridData.find(g => g.linkId === ingressLink.linkId)
+                return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection, 'zh')
-
-                let egressBanwidth = 0
-                let ingressBanwidth = 0
-                linkInfo.forEach((item) => {
-                  if (item.nextHop === d.egressLinkDirection && item.direction === 'egress') {
-                    egressBanwidth += item.bandwidth
-                  }
-                  if (item.nextHop === d.ingressLinkDirection && item.direction === 'ingress') {
-                    ingressBanwidth += item.bandwidth
-                  }
-                })
-
-                // 上行使用情况计算
-                const egressUsage = this.computeUsage(d.egressBitsRate, egressBanwidth)
-                // 下行使用情况计算
-                const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
-                // 宽带使用超过90%，赋红点
-
-                d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
-                // 计算npm分数
-                // 分数低于3分，赋红点
-                d.score = this.localComputeScore(d)
-
-                d.scoreLow3 = d.score < 3 || d.score === '-'
-
-                if (data) {
-                  const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
-                  if (!existedEgressLink) {
-                    data.egress.push({
-                      linkId: egressLink.linkId,
-                      nextHop: egressLink.nextHop,
-                      egressUsage: egressUsage,
-                      ingressUsage: ingressUsage,
-                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
-                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
-                      totalBitsRate: d.totalBitsRate,
-                      ...d
-                    })
-                  }
-                } else {
-                  nextGridData.push({
-                    linkId: ingressLink.linkId,
-                    nextHop: ingressLink.nextHop,
-                    egress: [{
-                      linkId: egressLink.linkId,
-                      nextHop: ingressLink.nextHop,
-                      egressUsage: egressUsage,
-                      ingressUsage: ingressUsage,
-                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
-                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
-                      totalBitsRate: d.totalBitsRate,
-                      ...d
-                    }]
-                  })
-                }
               }
+              return a.egressLinkDirection.localeCompare(b.egressLinkDirection, 'zh')
             })
 
-            this.nextGridData = nextGridData
+            this.isNextNoData = nextLinkData.length === 0
-          }
+            if (!this.isNextNoData) {
-        } else {
+              // 链路下一跳数据
-          this.isNextNoData = false
+              const nextGridData = []
-          this.isNextShowError = true
-          this.nextErrorMsg = res[1].message
-        }
-      }).catch(e => {
-        this.isLinkShowError = true
-        this.linkErrorMsg = e.message
 
-        this.isNextShowError = true
+              nextLinkData.forEach(d => {
-        this.nextErrorMsg = e.message
+                const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
+                const egressLink = linkInfo.find(l => l.nextHop === d.egressLinkDirection && l.direction === 'egress')
+
+                if (ingressLink && egressLink) {
+                  const data = nextGridData.find(g => g.linkId === ingressLink.linkId)
+
+                  let egressBanwidth = 0
+                  let ingressBanwidth = 0
+                  linkInfo.forEach((item) => {
+                    if (item.nextHop === d.egressLinkDirection && item.direction === 'egress') {
+                      egressBanwidth += item.bandwidth
+                    }
+                    if (item.nextHop === d.ingressLinkDirection && item.direction === 'ingress') {
+                      ingressBanwidth += item.bandwidth
+                    }
+                  })
+
+                  // 上行使用情况计算
+                  const egressUsage = this.computeUsage(d.egressBitsRate, egressBanwidth)
+                  // 下行使用情况计算
+                  const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
+                  // 宽带使用超过90%，赋红点
+
+                  d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
+                  // 计算npm分数
+                  // 分数低于3分，赋红点
+                  d.score = this.localComputeScore(d)
+
+                  d.scoreLow3 = d.score < 3 || d.score === '-'
+
+                  if (data) {
+                    const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
+                    if (!existedEgressLink) {
+                      data.egress.push({
+                        linkId: egressLink.linkId,
+                        nextHop: egressLink.nextHop,
+                        egressUsage: egressUsage,
+                        ingressUsage: ingressUsage,
+                        popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                        valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
+                        totalBitsRate: d.totalBitsRate,
+                        ...d
+                      })
+                    }
+                  } else {
+                    nextGridData.push({
+                      linkId: ingressLink.linkId,
+                      nextHop: ingressLink.nextHop,
+                      egress: [{
+                        linkId: egressLink.linkId,
+                        nextHop: ingressLink.nextHop,
+                        egressUsage: egressUsage,
+                        ingressUsage: ingressUsage,
+                        popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                        valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
+                        totalBitsRate: d.totalBitsRate,
+                        ...d
+                      }]
+                    })
+                  }
+                }
+              })
+              this.nextGridData = nextGridData
+            }
+          } else {
+            this.isNextNoData = false
+            this.isNextShowError = true
+            this.nextErrorMsg = res[1].message
+          }
+        }
       }).finally(() => {
         this.toggleLoading(false)
       })

src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="link-statistical-dimension" style="position: relative">
-    <div class="dimension-title" v-if="gridData.length>3">{{ $t('linkMonitor.egressLink') }}&nbsp;&&nbsp;{{ $t('linkMonitor.ingressLink') }}</div>
+    <div class="dimension-title">{{title}}</div>
-    <div class="dimension-title" v-else>{{ $t('linkMonitor.nextHopInternetOfGrid') }}</div>
 
     <chart-no-data v-if="isNoData" :test-id="`noData${gridData.length}`"></chart-no-data>
 
@@ -156,7 +155,8 @@ export default {
     gridData: Array,
     isNoData: Boolean,
     showError: Boolean,
-    content: String
+    content: String,
+    title: String
   },
   components: {
     ChartError,

src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue

@@ -33,7 +33,7 @@ import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { linksTrafficSankeyOption } from '@/views/charts2/charts/options/echartOption'
 import { ref, shallowRef } from 'vue'
-import { get } from '@/utils/http'
+import axios from 'axios'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import { useRoute } from 'vue-router'
@@ -116,7 +116,8 @@ export default {
         }
       }
       this.toggleLoading(true)
-      get(url, params).then(res => {
+      axios.get(url, { params: params }).then(res => {
+        res = res.data
         if (res.code === 200) {
           this.showError = false
           if (n === 0) {
@@ -131,10 +132,10 @@ export default {
         }
       }).catch(e => {
         console.error(e)
-        this.egress = true
+        this.egress = false
-        this.ingress = true
+        this.ingress = false
         this.showError = true
-        this.errorMsg = e.message
+        this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
       })

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

@@ -291,8 +291,9 @@ export default {
           this.errorMsg = res[0].message
         }
       }).catch(e => {
+        console.error(e)
         this.showError = true
-        this.errorMsg = e.message
+        this.errorMsg = this.errorMsgHandler(e)
         this.isNoData = true
       }).finally(() => {
         this.toggleLoading(false)

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

@@ -78,10 +78,11 @@ export default {
           this.showError = true
           this.errorMsg = res.message
         }
-      }).catch((e) => {
+      }).catch(e => {
+        console.error(e)
         this.isNoData = false
         this.showError = true
-        this.errorMsg = e.message
+        this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
       })

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

@@ -26,7 +26,7 @@
 import { pieChartOption1, pieChartOption2 } from '@/views/charts2/charts/options/echartOption.js'
 import * as echarts from 'echarts'
 import { shallowRef } from 'vue'
-import { get } from '@/utils/http'
+import axios from 'axios'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
@@ -70,16 +70,16 @@ export default {
         this.myChart = echarts.init(dom)
         this.chartOption = pieChartOption1
         this.loading1 = true
-        get(api.netWorkOverview.eventSeverity, params).then(res => {
+        axios.get(api.netWorkOverview.eventSeverity, { params: params }).then(res => {
-          if (res.code === 200) {
+          if (res.data.code === 200) {
             this.showError1 = false
-            if (res.data.result.length === 0) {
+            if (res.data.data.result.length === 0) {
               this.isNoData = true
               return
             } else {
               this.isNoData = false
             }
-            res.data.result = res.data.result.map(t => {
+            res.data.data.result = res.data.data.result.map(t => {
               if (t.eventSeverity === 'critical') {
                 t.index = 0
               } else if (t.eventSeverity === 'high') {
@@ -97,18 +97,19 @@ export default {
                 index: t.index
               }
             })
-            this.chartOption.legend.show = res.data.result.length > 0
+            this.chartOption.legend.show = res.data.data.result.length > 0
-            this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
+            this.chartOption.series[0].data = res.data.data.result.sort((a, b) => { return a.index - b.index })
             this.myChart.setOption(this.chartOption)
           } else {
             this.isNoData = false
             this.showError1 = true
-            this.errorMsg1 = res.message
+            this.errorMsg1 = res.data.message
           }
-        }).catch((e) => {
+        }).catch(e => {
+          console.error(e)
           this.isNoData = false
           this.showError1 = true
-          this.errorMsg1 = e.message
+          this.errorMsg1 = this.errorMsgHandler(e)
         }).finally(() => {
           this.loading1 = false
         })
@@ -117,23 +118,23 @@ export default {
         this.myChart2 = echarts.init(dom2)
         this.chartOption2 = pieChartOption2
         this.loading2 = true
-        get(api.netWorkOverview.eventType, params).then(res => {
+        axios.get(api.netWorkOverview.eventType, { params: params }).then(res => {
-          if (res.code === 200) {
+          if (res.data.code === 200) {
             this.showError2 = false
 
-            if (res.data.result.length === 0) {
+            if (res.data.data.result.length === 0) {
               this.isNoData2 = true
               return
             } else {
               this.isNoData2 = false
             }
-            res.data.result = res.data.result.map(t => {
+            res.data.data.result = res.data.data.result.map(t => {
               return {
                 name: t.eventType,
                 value: t.count
               }
             })
-            if (res.data.result.length <= 0) {
+            if (res.data.data.result.length <= 0) {
               this.chartOption2.legend.show = false
             } else {
               this.chartOption2.legend.show = true
@@ -145,10 +146,10 @@ export default {
             this.showError2 = true
             this.errorMsg2 = res.message
           }
-        }).catch((e) => {
+        }).catch(e => {
           this.isNoData2 = false
           this.showError2 = true
-          this.errorMsg2 = e.message
+          this.errorMsg2 = this.errorMsgHandler(e)
         }).finally(() => {
           this.loading2 = false
         })

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

@@ -209,7 +209,8 @@ import {
   storageKey,
   dbDrilldownTableConfig,
   fromRoute,
-  drillDownPanelTypeMapping
+  drillDownPanelTypeMapping,
+  commonErrorTip
 } from '@/utils/constants'
 import { get } from '@/utils/http'
 import unitConvert from '@/utils/unit-convert'
@@ -217,6 +218,7 @@ import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, readDrilld
 import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
 import _ from 'lodash'
+import axios from 'axios'
 import indexedDBUtils from '@/indexedDB'
 
 export default {
@@ -340,22 +342,22 @@ export default {
         endTime: getSecond(this.timeFilter.endTime)
       }
       const requestUrl = this.getCurUrl()
-      get(requestUrl, queryParams).then(response => {
+      axios.get(requestUrl, { params: queryParams }).then(response => {
-        if (response.code === 200) {
+        if (response.data.code === 200) {
           this.showError = false
           this.errorMsg = ''
-          this.chartData = response.data.result
+          this.chartData = response.data.data.result
           this.initData()
         } else {
           this.showError = true
-          this.errorMsg = response.message || 'Unknown'
+          this.errorMsg = response.data.message || commonErrorTip
           this.isNoData = true
           this.toggleLoading(false)
         }
       }).catch(e => {
         console.error(e)
         this.showError = true
-        this.errorMsg = e.message || 'Unknown'
+        this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.changeUrlTabState()
         this.toggleLoading(false)
@@ -653,11 +655,11 @@ export default {
       if (this.customTableTitles && this.customTableTitles.length > 0) {
         this.customTableTitles.forEach(tableColumn => {
           if (tableColumn.columnType === tableColumnType.chainRatio && tableColumn.isInMainUrl && tableDataTmp && tableDataTmp.length > 0) {
-            get(self.gerCycleUrl(), queryParams).then(response => {
+            axios.get(self.gerCycleUrl(), { params: queryParams }).then(response => {
-              if (response.code === 200) {
+              if (response.data.code === 200) {
                 tableColumn.showError = false
                 tableColumn.errorMsg = ''
-                cycleTotalList = response.data.result
+                cycleTotalList = response.data.data.result
                 tableDataTmp.forEach(item => {
                   const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
                   let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
@@ -703,12 +705,12 @@ export default {
                 })
               } else {
                 tableColumn.showError = true
-                tableColumn.errorMsg = response.message || 'Unknown'
+                tableColumn.errorMsg = response.data.message || commonErrorTip
               }
             }).catch(e => {
-              console.log(e)
+              console.error(e)
               tableColumn.showError = true
-              tableColumn.errorMsg = e.message || 'Unknown'
+              tableColumn.errorMsg = this.errorMsgHandler(e)
             }).finally(e => {
               this.tableData = tableDataTmp
               this.tableDataBackup = tableDataTmp
@@ -719,13 +721,13 @@ export default {
               // 查询需要单独查询的，且需要展示环比图标，列的当前周期的数据
               this.customTableTitles.forEach(tableColumn => {
                 if (tableColumn.columnType === tableColumnType.chainRatio && !tableColumn.isInMainUrl) {
-                  get(self.gerColumnUrl(tableColumn), queryParams).then(response => {
+                  axios.get(self.gerColumnUrl(tableColumn), { params: queryParams }).then(response => {
-                    if (response.code === 200) {
+                    if (response.data.code === 200) {
                       if (!tableColumn.showError) {
                         tableColumn.showError = false
                         tableColumn.errorMsg = ''
                       }
-                      const columnList = response.data.result
+                      const columnList = response.data.data.result
                       self.tableData.forEach((item, i) => {
                         const data = columnList.find(i => i[curTab.prop] === item.tab)
                         if (!item.scoreGroup) {
@@ -746,12 +748,12 @@ export default {
                       })
                     } else {
                       tableColumn.showError = true
-                      tableColumn.errorMsg = response.message || 'Unknown'
+                      tableColumn.errorMsg = response.data.message || commonErrorTip
                     }
                   }).catch(e => {
-                    console.log(e)
+                    console.error(e)
                     tableColumn.showError = true
-                    tableColumn.errorMsg = e.message || 'Unknown'
+                    tableColumn.errorMsg = this.errorMsgHandler(e)
                   }).finally(e => {
                     // 查询需要单独查询的，且需要展示环比图标，列的前一周期的数据
                     if (tableColumn.cycle && self.tableData && self.tableData.length > 0) {
@@ -759,13 +761,13 @@ export default {
                         ...queryParams,
                         cycle: tableColumn.cycle
                       }
-                      get(self.gerColumnUrl(tableColumn), queryCycleParams).then(response => {
+                      axios.get(self.gerColumnUrl(tableColumn), { params: queryCycleParams }).then(response => {
-                        if (response.code === 200) {
+                        if (response.data.code === 200) {
                           if (!tableColumn.showError) {
                             tableColumn.showError = false
                             tableColumn.errorMsg = ''
                           }
-                          cycleTotalList = response.data.result
+                          cycleTotalList = response.data.data.result
                           self.tableData.forEach(item => {
                             const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
                             let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
@@ -814,12 +816,12 @@ export default {
                           })
                         } else {
                           tableColumn.showError = true
-                          tableColumn.errorMsg = response.message || 'Unknown'
+                          tableColumn.errorMsg = response.data.message || commonErrorTip
                         }
                       }).catch(e => {
-                        console.log(e)
+                        console.error(e)
                         tableColumn.showError = true
-                        tableColumn.errorMsg = e.message || 'Unknown'
+                        tableColumn.errorMsg = this.errorMsgHandler(e)
                       })
                     }
                   })

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

@@ -285,8 +285,7 @@ export default {
         console.error(e)
         this.toggleLoading(false)
         this.showError = true
-        this.errorMsg = ''
+        this.errorMsg = this.errorMsgHandler(e)
-        this.errorMsg = e.message
       })
     },
     getUrlParam (param, defaultValue, isNumber) {

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

@@ -165,7 +165,7 @@ export default {
       }).catch((e) => {
         this.isNoData = false
         this.showError = true
-        this.errorMsg = e.message
+        this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
       })

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

@@ -139,10 +139,10 @@ export default {
           this.showError = true
           this.errorMsg = res.message
         }
-      }).catch((e) => {
+      }).catch(e => {
         this.isNoData = false
         this.showError = true
-        this.errorMsg = e.message
+        this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
       })

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

@@ -89,9 +89,9 @@ export default {
           this.showError = true
           this.errorMsg = res.message
         }
-      }).catch(error => {
+      }).catch(e => {
         this.showError = true
-        this.errorMsg = error.message
+        this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
       })

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

@@ -61,8 +61,8 @@ import { shallowRef } from 'vue'
 import _ from 'lodash'
 import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import { getSecond } from '@/utils/date-util'
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
+import axios from 'axios'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import unitConvert from '@/utils/unit-convert'
@@ -154,7 +154,8 @@ export default {
           url = api.npm.location.packetsRetrains
         }
         if (url) {
-          get(url, params).then(res => {
+          axios.get(url, { params: params }).then(res => {
+            res = res.data
             if (res.code === 200) {
               this.showError = false
               this.isNoData = res.data.result.length === 0
@@ -180,10 +181,11 @@ export default {
               this.showError = true
               this.errorMsg = res.message
             }
-          }).catch((e) => {
+          }).catch(e => {
+            console.error(e)
             this.isNoData = false
             this.showError = true
-            this.errorMsg = e.message
+            this.errorMsg = this.errorMsgHandler(e)
           }).finally(() => {
             this.toggleLoading(false)
           })

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

@@ -54,7 +54,8 @@ import { storageKey, unitTypes, countryNameIdMapping } from '@/utils/constants'
 import locationOptions from '@/views/charts2/charts/locationOptions'
 import { valueToRangeValue } from '@/utils/unit-convert'
 import { getSecond } from '@/utils/date-util'
-import { api, getData } from '@/utils/api'
+import { api } from '@/utils/api'
+import axios from 'axios'
 import { get } from '@/utils/http'
 import chartMixin from '@/views/charts2/chart-mixin'
 // import { Rectangle3D } from '@amcharts/amcharts4/.internal/core/elements/3d/Rectangle3D'
@@ -121,7 +122,8 @@ export default {
           side: this.trafficDirection.toLowerCase(),
           country: this.location
         }
-        getData(api.npm.location.map, params).then(res => {
+        axios.get(api.npm.location.map, { params: params }).then(res => {
+          res = res.data
           if (res.length > 0) {
             // 计算分数
             this.showError = false
@@ -176,7 +178,7 @@ export default {
           }
         }).catch((e) => {
           this.showError = true
-          this.errorMsg = e.message
+          this.errorMsg = this.errorMsgHandler(e)
         }).finally(() => {
           this.toggleLoading(false)
         })

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

@@ -130,10 +130,10 @@ export default {
           this.showError = true
           this.errorMsg = res.message
         }
-      }).catch(error => {
+      }).catch(e => {
         this.isNoData = false
         this.showError = true
-        this.errorMsg = error.message
+        this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
       })

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

@@ -36,6 +36,7 @@ import { chartColor3, unitTypes } from '@/utils/constants.js'
 import { ref, shallowRef } from 'vue'
 import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import { get } from '@/utils/http'
+import axios from 'axios'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
@@ -194,7 +195,8 @@ export default {
       }
       this.toggleLoading(true)
       if (params.type && params.q) {
-        get(api.npm.overview.trafficGraph, params).then((res) => {
+        axios.get(api.npm.overview.trafficGraph, { params: params }).then(res => {
+          res = res.data
           if (res.code === 200) {
             this.showError = false
             this.isNoData = res.data.result.length === 0
@@ -215,7 +217,6 @@ export default {
                 { name: this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 4 }
               ]
             } else {
-              console.info(res.data.result)
               this.initData(res.data.result, val)
             }
           } else {
@@ -226,17 +227,17 @@ export default {
         }).catch(e => {
           this.isNoData = false
           this.showError = true
-          this.errorMsg = e.message
+          this.errorMsg = this.errorMsgHandler(e)
           console.error(e)
         }).finally(() => {
           this.toggleLoading(false)
         })
       } else {
         this.toggleLoading(true)
-        const totalTrafficAnalysis = get(api.npm.overview.totalTrafficAnalysis, params)
+        const totalTrafficAnalysis = axios.get(api.npm.overview.totalTrafficAnalysis, { params: params })
-        const totalNetworkAnalysis = get(api.npm.overview.totalNetworkAnalysis, params)
+        const totalNetworkAnalysis = get(api.npm.overview.totalNetworkAnalysis, { params: params })
-        const totalHttpResponseDelay = get(api.npm.overview.totalHttpResponseDelay, params)
+        const totalHttpResponseDelay = get(api.npm.overview.totalHttpResponseDelay, { params: params })
-        const totalSslConDelay = get(api.npm.overview.totalSslConDelay, params)
+        const totalSslConDelay = get(api.npm.overview.totalSslConDelay, { params: params })
         const npmLineData = []
         Promise.all([totalNetworkAnalysis, totalTrafficAnalysis, totalHttpResponseDelay, totalSslConDelay]).then(res => {
           res.forEach(item => {
@@ -267,13 +268,12 @@ export default {
               { name: this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 4 }
             ]
           } else {
-            console.info(npmLineData)
             this.initData(npmLineData, val)
           }
         }).catch(e => {
           this.isNoData = false
           this.showError = true
-          this.errorMsg = e.message
+          this.errorMsg = this.errorMsgHandler(e)
         }).finally(() => {
           this.toggleLoading(false)
         })