fix: 修复npm-event单测id根据时间命名可能会导致报错的问题

fix: 修复linkMonitor下一跳网格图排序错乱问题
Update .gitlab-ci.yml
2023-02-23 10:51:56 +08:00 · 2023-02-23 10:23:24 +08:00 · 2023-02-21 08:07:38 +00:00 · 2023-02-21 07:59:43 +00:00 · 2023-02-21 07:55:38 +00:00 · 2023-02-21 07:35:45 +00:00
38 changed files with 1684 additions and 471 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
  env: {
    browser: true,
-    es2021: true
+    es2021: true,
+    jest: true
  },
  extends: [
    'plugin:vue/vue3-essential',
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -2,6 +2,7 @@
 stages:
  - gen_git-log
  - build_project
+  - test
  - build_image

 cache:
@@ -10,7 +11,7 @@ cache:
      - package.json
  paths:
    - node_modules
-    - dist/
+#    - dist/

 before_script:
  - export CNUI_TAG=$(date +%Y%m%d%H%M%S)
@@ -29,7 +30,7 @@ generate_git-log:
      - public/index.html
      - public/git-log.html
  only:
-    - dev
+    - dev-test
  tags:
    - galaxy

@@ -41,29 +42,48 @@ build_project:
    - cnpm install --save-dev --unsafe-perm
    - echo "npm run build"
    - cnpm run build
+  artifacts:
+    name: "$CI_JOB_NAME-$CI_COMMIT_REF_NAME"
+    when: on_success
+    paths:
+      - dist/
  only:
-    - dev
+    - dev-test
    - tags
  tags:
    - galaxy

+test:
+  stage: test
+  script:
+    - cnpm run test
+  when: on_success
+  only:
+    - dev-test
+  tags:
+    - galaxy
+
 build_image:
+  dependencies:
+    - build_project
  stage: build_image
  script:
    - echo "docker build"
-    - sudo docker build --no-cache -t cn-ui:$CNUI_TAG .
+    - sudo docker build --no-cache -t cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG .
    - echo "docker tag"
-    - sudo docker tag cn-ui:$CNUI_TAG 192.168.40.153:9080/cyber-narrator/cn-ui:$CNUI_TAG
+    - sudo docker tag cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG
    - echo "docker push"
-    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui:$CNUI_TAG
+    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG
  when: on_success
  only:
-    - dev
+    - dev-test
  tags:
    - galaxy


 build_release_image:
+  dependencies:
+    - build_project
  stage: build_image
  script:
    - echo 'tag名称是'
@@ -71,11 +91,11 @@ build_release_image:
    - echo '提交的版本是'
    - echo $CI_COMMIT_REF_NAME
    - echo "docker build"
-    - sudo docker build --no-cache -t cn-ui:$CI_COMMIT_TAG .
+    - sudo docker build --no-cache -t cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG .
    - echo "docker tag"
-    - sudo docker tag cn-ui:$CI_COMMIT_TAG 192.168.40.153:9080/cyber-narrator/cn-ui:$CI_COMMIT_TAG
+    - sudo docker tag cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG
    - echo "docker push"
-    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui:$CI_COMMIT_TAG
+    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG
  only:
    - tags
  tags:
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss
@@ -98,11 +98,11 @@
        //top: 0;
        //left: 0;
        display: flex;
-        .line-value-mpackets.mousemove-cursor {
+        .line-value-tabs.mousemove-cursor {
          border-top: 4px solid #D3D0D8;
          z-index: 0;
        }
-        .line-value-mpackets {
+        .line-value-tabs {
          cursor: pointer;
          padding: 16px 0 0 20px;
          border-top: 4px solid transparent;
@@ -122,10 +122,10 @@
              }
            }
          }
-          .line-value-mpackets-name {
+          .line-value-tabs-name {
            position: relative;
            display: flex;
-            .mpackets-name {
+            .tabs-name {
              flex: 1;
              padding-left: 19px;
            }
--- a/src/components/common/Error.vue
+++ b/src/components/common/Error.vue
@@ -141,7 +141,6 @@ export default {
    hoverError (e) {
      // const dom = document.getElementById('error-content')
      // if (dom) {
-      //   console.log('---', dom.clientHeight)
      // }
    }
  }
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -98,7 +98,6 @@ export default {
      if (val && val.value !== -1) {
        // 切换轮询请求时间频率时，发现有未结束的请求，终止请求
        const cancelList = this.$store.state.panel.httpCancel
-        // console.log('timeRefresh.vue------setRefresh------查看终止数量', cancelList, cancelList.length)
        if (cancelList.length > 0) {
          cancelList.forEach((cancel, index) => {
            cancel()
--- a/src/components/rightBox/report/ReportBox.vue
+++ b/src/components/rightBox/report/ReportBox.vue
@@ -19,7 +19,6 @@
                       v-model="editObject.config.timeConfig.type"
                       class="right-box__select"
                       collapse-tags
-                       :disabled="!!editObject.id"
                       placeholder=" "
                       popper-class="right-box-select-dropdown right-box-select-report "
                       size="small"
@@ -31,7 +30,6 @@
            </el-select>
            <template v-if="editObject.config.timeConfig.type === 'this'">
              <el-select id="reportBoxTimeUnitSelect"
-                         :disabled="!!editObject.id"
                         v-model="editObject.config.timeConfig.unit"
                         class="right-box__select"
                         collapse-tags
@@ -45,7 +43,7 @@
              </el-select>
            </template>
            <div v-else-if="editObject.config.timeConfig.type === 'last' || editObject.config.timeConfig.type === 'previous'" style="display: flex;">
-              <el-input v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" " :disabled="!!editObject.id">
+              <el-input v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" ">
                <template #prepend><i @click="timeOffsetHandle('m')" class="cn-icon cn-icon-a-"></i></template>
                <template #append><i @click="timeOffsetHandle('p')" class="cn-icon cn-icon-a-1"></i></template>
              </el-input>
@@ -53,7 +51,6 @@
                         v-model="editObject.config.timeConfig.unit"
                         class="right-box__select right-box__select-single"
                         collapse-tags
-                         :disabled="!!editObject.id"
                         placeholder=" "
                         popper-class="right-box-select-dropdown  el-select-last"
                         size="small"
@@ -73,7 +70,6 @@
                    v-model="editObject.config.startTime"
                    size="small"
                    :format="dateFormat"
-                    :disabled="!!editObject.id"
                    :disabled-date="startDisabledDate"
                    @change="startTimeChang"
                    prefix-icon="cn-icon cn-icon-shijian"
@@ -92,7 +88,6 @@
                    v-model="editObject.config.endTime"
                    size="small"
                    :format="dateFormat"
-                    :disabled="!!editObject.id"
                    :disabled-date="endDisabledDate"
                    @change="endTimeChange"
                    prefix-icon="cn-icon cn-icon-shijian"
@@ -103,41 +98,41 @@
            </div>
          </el-form-item >
          <el-form-item class="el-height">
-            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize' || !!editObject.id" :label="$t('report.enableTimeSchedule')" size="large" />
+            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize'" :label="$t('report.enableTimeSchedule')" size="large" />
          </el-form-item>
          <!--Enable time schedule-->
          <el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
            <div class="enable-tab">
-              <div class="enable-tabs" @click="editObject.id ? null : (scheduleType = type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value, 'disable': editObject.id}">{{$t(type.name)}}</div>
+              <div class="enable-tabs" @click="scheduleTypeChange(type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value}">{{$t(type.name)}}</div>
            </div>
            <div class="enable-tabs-daily" v-if="scheduleType === scheduleTypeList[0].value">
              <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-              <el-input v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+              <el-input v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
                <template #append>{{$t('report.day')}}</template>
              </el-input>
            </div>
-            <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value" :disabled="!!editObject.id">
+            <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value">
              <!-- 每隔几周暂时隐藏 -->
              <!-- <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
              <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="Please input">
                <template #append>{{$t('report.week')}}</template>
              </el-input>-->
-              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem" :disabled="!!editObject.id">
+              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem">
                <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 月 -->
            <div class="enable-tabs-per-month" v-else-if="scheduleType === scheduleTypeList[2].value">
              <div class="enable-month-tab">
-                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'daily')" :class="{'active': monthScheduleType === 'daily', 'disable': editObject.id}">{{$t('report.date')}}</div>
-                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'weekly')" :class="{'active': monthScheduleType === 'weekly', 'disable': editObject.id}">{{$t('report.week')}}</div>
-                <el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large" :disabled="!!editObject.id"/>
+                <div class="enable-month-tabs" @click="monthScheduleType = 'daily'" :class="{'active': monthScheduleType === 'daily'}">{{$t('report.date')}}</div>
+                <div class="enable-month-tabs" @click="monthScheduleType = 'weekly'" :class="{'active': monthScheduleType === 'weekly'}">{{$t('report.week')}}</div>
+                <el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large"/>
              </div>
              <div class="enable-month-data-tab">
                <!-- 自定义月，循环 -->
                <template v-if="monthIsCycle">
                  <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
                    <template #append>{{$t('report.month')}}</template>
                  </el-input>
                </template>
@@ -145,8 +140,8 @@
                <template v-else>
                  <div class="enable-month-moon-custom">{{$t('report.custom')}}</div>
                  <div class="enable-month-all">
-                    <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange">
                      <el-checkbox v-for="(item, index) in monthList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
@@ -154,8 +149,8 @@
                <!-- 按日期 -->
                <template v-if="monthScheduleType === 'daily'">
                  <div class="enable-month-data-tabs">
-                    <el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange">
                      <el-checkbox v-for="item in dateList" :key="item" :label="item"/>
                    </el-checkbox-group>
                  </div>
@@ -168,7 +163,6 @@
                             class="right-box__select"
                             multiple
                             placeholder=" "
-                             :disabled="!!editObject.id"
                             popper-class="right-box-select-dropdown right-box-select-report"
                             size="small"
                             @change="()=>{ this.$forceUpdate() }">
@@ -177,8 +171,8 @@
                    </template>
                  </el-select>
                  <div class="enable-month-week">
-                    <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange">
                      <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
@@ -228,7 +222,7 @@
                       :disabled="!!editObject.id"
                       popper-class="right-box-select-dropdown right-box-select-report"
                       size="small"
-                       @change="typeChange">
+            >
              <template v-for="category in categoryList" :key="category.id">
                <el-option :label="category.name" :value="category.id"></el-option>
              </template>
@@ -413,20 +407,14 @@ export default {
  watch: {
    scheduleType (n, o) {
      this.editObject.config.schedulerConfig.type = n
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
    },
    scheduleChecked (n) {
      this.editObject.config.isScheduler = n ? 1 : 0
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
    },
    monthScheduleType (n) {
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
    },
    monthIsCycle (n) {
      if (!this.editObject.id) {
@@ -560,15 +548,13 @@ export default {
          this.editObject.config.timeConfig.offset--
        }
      }
-    },
-    typeChange (id) {
-
    },
    cleanScheduleConfig () {
      this.editObject.config.schedulerConfig.monthDates = []
      this.editObject.config.schedulerConfig.weekDates = []
      this.editObject.config.schedulerConfig.months = []
      this.editObject.config.schedulerConfig.monthWeekDates = []
+      this.editObject.config.schedulerConfig.interval = 1
      this.monthIsCycle = true
      this.dateCheckedAll = false
      this.dateIsIndeterminate = false
@@ -582,6 +568,9 @@ export default {
        this.scheduleChecked = false
      }
    },
+    scheduleTypeChange (val) {
+      this.scheduleType = val
+    },
    save () {
      if (this.blockOperation.save) { return }
      this.blockOperation.save = true
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -318,11 +318,12 @@ export async function getI18n () {

 /* 获得原始的3611-2 json字符串数据 */
 export async function getIso36112JsonData (suffix) {
+  const url = `${window.location.protocol}//${window.location.host}/geojson/${suffix}.json`
  const request = new Promise(resolve => {
-    axios({
-      url: `${window.location.protocol}//${window.location.host}:${window.location.port}/geojson/${suffix}.json`
-    }).then(response => {
+    axios({ url }).then(response => {
      resolve(response.data || response || null)
+    }).catch(err => {
+      console.error(err)
    })
  })
  return await request
--- a/src/views/administration/Index.vue
+++ b/src/views/administration/Index.vue
@@ -43,16 +43,6 @@ export default {
          i18n: 'I18n',
          path: '/administration/i18n',
          icon: 'cn-icon cn-icon-i18n'
-        },
-        {
-          i18n: 'galaxyProxy.galaxyProxy',
-          path: '/administration/galaxyProxy',
-          icon: 'cn-icon cn-icon-proxy'
-        },
-        {
-          i18n: 'overall.chart',
-          path: '/administration/chart',
-          icon: 'cn-icon cn-icon-chart'
        }
      ]
    }
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -150,14 +150,12 @@ export default {
      if (panels && panels.length > 0) {
        this.panel = panels[0]
      }
-      // console.log(this.panel)
      if (this.panel.id) {
        if (this.panel.params) {
          this.panel.params = JSON.parse(this.panel.params)
        } else {
          this.panel.params = {}
        }
-        // console.log(this.panel)
        const allCharts = (await getChartList({ panelId: this.panel.id, pageSize: -1 })).map(chart => {
          chart.i = chart.id
          this.recursionParamsConvert(chart)
--- a/src/views/charts/PanelChartList.vue
+++ b/src/views/charts/PanelChartList.vue
@@ -114,8 +114,8 @@ export default {
    },
    reload () {
      this.copyDataList.forEach(item => {
-        if (this.$refs['chart' + item.id]) {
-          this.$refs['chart' + item.id].reload()
+        if (this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0]) {
+          this.$refs['chart' + item.id][0].reload()
        }
      })
    },
--- a/src/views/charts/wholeScreenScroll/DnsScreen.vue
+++ b/src/views/charts/wholeScreenScroll/DnsScreen.vue
@@ -32,8 +32,8 @@ export default {
  methods: {
    reload () {
      this.dnsScreenDataList.forEach(item => {
-        if (this.$refs['chart' + item.id]) {
-          this.$refs['chart' + item.id].getChartData()
+        if (this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0]) {
+          this.$refs['chart' + item.id][0].getChartData()
        }
      })
    }
--- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
+++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
@@ -5,17 +5,17 @@
      <div class="line-header-left">
        <div class="line-value-active" v-if="lineTab"></div>
        <div class="line-value">
-          <div class="line-value-mpackets"
+          <div class="line-value-tabs"
               v-show="item.show"
               :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
-               v-for="(item, index) in mpackets"
+               v-for="(item, index) in tabs"
               :key="index"
               @mouseenter="mouseenter(item)"
               @mouseleave="mouseleave(item)"
               @click="activeChange(item, index)">
-            <div class="line-value-mpackets-name">
+            <div class="line-value-tabs-name">
              <div :class="item.class"></div>
-              <div class="mpackets-name">{{$t(item.name)}}</div>
+              <div class="tabs-name">{{$t(item.name)}}</div>
            </div>
            <div class="line-value-unit">
              <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
@@ -126,7 +126,7 @@ export default {
          label: 'Maximum'
        }
      ],
-      mpackets: [
+      tabs: [
        { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
        { analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
        { analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
@@ -202,7 +202,7 @@ export default {
          this.isNoData = res.data.result.length === 0
          if (this.isNoData) {
            this.lineTab = ''
-            this.mpackets = [
+            this.tabs = [
              { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
              { analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
              { analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
@@ -323,7 +323,7 @@ export default {
          this.chartOption.tooltip.formatter = (params) => {
            params.forEach(t => {
              t.seriesName = this.$t(t.seriesName)
-              this.mpackets.forEach(e => {
+              this.tabs.forEach(e => {
                if (this.$t(e.name) === t.seriesName) {
                  t.borderColor = chartColor3[e.positioning]
                }
@@ -366,16 +366,16 @@ export default {
    legendSelectChange (item, index, val) {
      if (index === 'index') {
        this.dispatchLegendSelectAction(item.name)
-      } else if (this.mpackets[index] && this.mpackets[index].name === item.name) {
+      } else if (this.tabs[index] && this.tabs[index].name === item.name) {
        this.dispatchLegendSelectAction(item.name)
-        this.mpackets.forEach((t) => {
+        this.tabs.forEach((t) => {
          if (t.name !== item.name) {
            this.dispatchLegendUnSelectAction(t.name)
          }
        })
      }
      if (val === 'active') {
-        this.mpackets.forEach(t => {
+        this.tabs.forEach(t => {
          if (item.name === t.name) {
            t.invertTab = !t.invertTab
          } else {
@@ -387,7 +387,7 @@ export default {
            } else {
              this.lineTab = t.class
            }
-            this.mpackets.forEach((e) => {
+            this.tabs.forEach((e) => {
              this.dispatchLegendSelectAction(e.name)
            })
          }
@@ -395,8 +395,8 @@ export default {
      }
    },
    handleActiveBar () {
-      if (document.querySelector('.network .line-value-mpackets.is-active')) {
-        const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
+      if (document.querySelector('.network .line-value-tabs.is-active')) {
+        const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-tabs.is-active')
        const activeBar = document.querySelector('.network .line-value-active')
        activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
      }
@@ -409,7 +409,7 @@ export default {
      this.lineTab = ''
      this.handleActiveBar()
      this.showMarkLine = !this.showMarkLine
-      this.mpackets.forEach((e) => {
+      this.tabs.forEach((e) => {
        if (!e.invertTab) {
          e.invertTab = true
        }
@@ -421,9 +421,9 @@ export default {
      let echartsData
      const chartOption = this.myChart.getOption()
      if (this.lineTab) {
-        echartsData = this.mpackets.filter(t => t.show === true && t.invertTab === false)
+        echartsData = this.tabs.filter(t => t.show === true && t.invertTab === false)
      } else {
-        echartsData = this.mpackets.filter(t => t.show === true)
+        echartsData = this.tabs.filter(t => t.show === true)
      }
      if (this.lineRefer === 'Average' && this.showMarkLine) {
        chartOption.series.forEach((t, i) => {
@@ -488,13 +488,13 @@ export default {
        })
      }
      lineData.splice(0, 1)
-      const mpackets = _.cloneDeep(this.mpackets)
+      const tabs = _.cloneDeep(this.tabs)
      if (val === 'Queries/s') {
        lineData.forEach((d, i) => {
-          mpackets[i].data = d.values
-          mpackets[i].analysis = d.analysis
+          tabs[i].data = d.values
+          tabs[i].analysis = d.analysis
        })
-        mpackets.forEach((e, i) => {
+        tabs.forEach((e, i) => {
          if (i !== 0) {
            e.show = false
          }
@@ -503,11 +503,11 @@ export default {
          this.lineTab = 'total'
          this.legendSelectChange(e, 0)
        })
-        this.mpackets = mpackets
-        this.echartsInit(this.mpackets, true)
+        this.tabs = tabs
+        this.echartsInit(this.tabs, true)
      } else {
        const unit = 'bps'
-        this.legendInit(lineData, active, show, unit, mpackets)
+        this.legendInit(lineData, active, show, unit, tabs)
      }
    },
    legendInit (data, active, show, type, dnsData) {
@@ -535,14 +535,14 @@ export default {
          }
        }
      })
-      this.mpackets = dnsData
+      this.tabs = dnsData
      if (num === 3) {
        dnsData[0].invertTab = false
        this.lineTab = 'total'
        this.legendSelectChange(dnsData[0], 0)
-        this.echartsInit(this.mpackets)
+        this.echartsInit(this.tabs)
      } else {
-        this.echartsInit(this.mpackets, show)
+        this.echartsInit(this.tabs, show)
        if (!this.lineRefer) this.lineRefer = 'Average'
      }
    }
@@ -550,7 +550,7 @@ export default {
  mounted () {
    this.timer = setTimeout(() => {
      if (this.lineTab) {
-        const data = this.mpackets.find(t => t.class === this.lineTab)
+        const data = this.tabs.find(t => t.class === this.lineTab)
        this.activeChange(data, data.positioning)
      } else {
        this.init()
--- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
@@ -29,20 +29,20 @@
              <div class="popper-content__link-id">Link ID: {{ item.linkId }}</div>
              <div class="popper-content__link-info">
                <div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div>
-                <div class="info__value" style="margin-left: 8px">
+                <div class="info__value" :test-id="`linkBlockTotal${index}`" style="margin-left: 8px">
                  {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}
                </div>
              </div>
              <div class="popper-content__link-info">
                <div class="info__label">{{ $t('linkMonitor.linkBlock.bandwidthUsage') }}</div>
                <div class="info__value" style="display: flex">
-                  <div>
+                  <div :test-id="`linkBlockEgressUsage${index}`">
                    <svg class="icon item-popover-up" aria-hidden="true">
                      <use xlink:href="#cn-icon-egress"></use>
                    </svg>
                    {{ convertValue(item.egressUsage) }}
                  </div>
-                  <div>
+                  <div :test-id="`linkBlockIngressUsage${index}`">
                    <svg class="icon item-popover-down" aria-hidden="true">
                      <use xlink:href="#cn-icon-ingress"></use>
                    </svg>
@@ -84,7 +84,7 @@
              <div class="popper-content__link-id">Next-Hop Internet: {{ item.linkDirection }}</div>
              <div class="popper-content__link-info">
                <div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div>
-                <div class="info__value" style="margin-left: 8px">
+                <div class="info__value" :test-id="`nextHopTotal${index}`" style="margin-left: 8px">
                  {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}
                </div>
              </div>
@@ -118,13 +118,13 @@ import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { colorGradientCalculation } from '@/utils/tools'
 import unitConvert from '@/utils/unit-convert'
 import { drillDownPanelTypeMapping, storageKey, unitTypes } from '@/utils/constants'
 import { getSecond } from '@/utils/date-util'
 import ChartError from '@/components/common/Error'
+import axios from 'axios'

 export default {
  name: 'LinkBlock',
@@ -175,10 +175,13 @@ export default {
        endTime: getSecond(this.timeFilter.endTime)
      }

-      const dataRequest = get(api.linkMonitor.analysis, params)
-      const nextHopRequest = get(api.linkMonitor.nextHopAnalysis, params)
+      const dataRequest = axios.get(api.linkMonitor.analysis, { params: params })
+      const nextHopRequest = axios.get(api.linkMonitor.nextHopAnalysis, { params: params })

-      Promise.all([dataRequest, nextHopRequest]).then(res => {
+      Promise.all([dataRequest, nextHopRequest]).then(response => {
+        const res = []
+        res[0] = response[0].data
+        res[1] = response[1].data
        if (res[0].code === 200 && res[1].code === 200) {
          this.showError = false

--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
@@ -12,10 +12,10 @@
 import chartMixin from '@/views/charts2/chart-mixin'
 import { getSecond } from '@/utils/date-util'
 import { api } from '@/utils/api'
-import { get } from '@/utils/http'
 import { storageKey } from '@/utils/constants'
 import PopoverContent from './LinkDirectionGrid/PopoverContent'
 import { computeScore } from '@/utils/tools'
+import axios from 'axios'

 export default {
  name: 'LinkDirectionGrid',
@@ -56,11 +56,14 @@ export default {
        endTime: getSecond(this.timeFilter.endTime)
      }

-      const dataRequest = get(api.linkMonitor.bigramAnalysis, params)
-      const nextHopRequest = get(api.linkMonitor.bigramNextHopAnalysis, params)
+      const dataRequest = axios.get(api.linkMonitor.bigramAnalysis, { params: params })
+      const nextHopRequest = axios.get(api.linkMonitor.bigramNextHopAnalysis, { params: params })
      this.toggleLoading(true)

-      Promise.all([dataRequest, nextHopRequest]).then(res => {
+      Promise.all([dataRequest, nextHopRequest]).then(response => {
+        const res = []
+        res[0] = response[0].data
+        res[1] = response[1].data
        if (res[0].code === 200) {
          this.isLinkShowError = false
          // 链路流量数据
@@ -95,7 +98,7 @@ export default {
                // 分数低于3分，赋红点
                d.score = this.localComputeScore(d)

-                d.scoreLow3 = d.score < 3
+                d.scoreLow3 = d.score < 3 || d.score === '-'

                if (data) {
                  const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
@@ -143,9 +146,9 @@ export default {
          // 接口数据乱序，根据出方向排序，再根据同个出方向下的入进行排序
          nextLinkData.sort((a, b) => {
            if (a.ingressLinkDirection !== b.ingressLinkDirection) {
-              return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection)
+              return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection, 'zh')
            }
-            return a.egressLinkDirection.localeCompare(b.egressLinkDirection)
+            return a.egressLinkDirection.localeCompare(b.egressLinkDirection, 'zh')
          })

          this.isNextNoData = nextLinkData.length === 0
@@ -182,7 +185,7 @@ export default {
                // 分数低于3分，赋红点
                d.score = this.localComputeScore(d)

-                d.scoreLow3 = d.score < 3
+                d.scoreLow3 = d.score < 3 || d.score === '-'

                if (data) {
                  const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
@@ -225,13 +228,11 @@ export default {
          this.nextErrorMsg = res[1].message
        }
      }).catch(e => {
-        console.error(e)
-
        this.isLinkShowError = true
-        this.linkErrorMsg = e[0].message
+        this.linkErrorMsg = e.message

        this.isNextShowError = true
-        this.nextErrorMsg = e[1].message
+        this.nextErrorMsg = e.message
      }).finally(() => {
        this.toggleLoading(false)
      })
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
@@ -21,13 +21,13 @@
          <span v-if="row.nextHop">{{ row.nextHop }}</span>
          <span v-else>{{ row.linkId }}</span>
        </div>
-        <div v-for="(item, index2) in row.egress" :key="index2">
+        <div v-for="(item, index3) in row.egress" :key="index3">

          <el-popover :width="item.popoverWidth" placement="right" trigger="hover">
            <template #reference>
              <div class="data-item data-item__hover">
-                <div :class="row.egress[index2].usageMore90 ? 'data-item__point-red':'data-item__point'"></div>
-                <div :class="row.egress[index2].scoreLow3 ? 'data-item__point-red':'data-item__point'"></div>
+                <div :test-id="`usagePoint${gridData.length}-${index2+1}-${index3+1}`" :class="item.usageMore90 ? 'data-item__point-red':'data-item__point'"></div>
+                <div :test-id="`scorePoint${gridData.length}-${index2+1}-${index3+1}`" :class="item.scoreLow3 ? 'data-item__point-red':'data-item__point'"></div>
              </div>
            </template>

@@ -35,13 +35,13 @@
            <template #default>
              <div class="item-popover-header">
                <!--兼容下一跳情况-->
-                <span v-if="row.nextHop">{{ row.nextHop }}</span>
-                <span v-else>{{ row.linkId }}</span>
+                <span v-if="row.nextHop" :test-id="`toNextHop${index2+1}`">{{ row.nextHop }}</span>
+                <span v-else :test-id="`fromLinkId${index2+1}`">{{ row.linkId }}</span>
                <svg class="icon item-popover-header-icon" aria-hidden="true">
                  <use xlink:href="#cn-icon-arrow-right2"></use>
                </svg>
-                <span v-if="row.nextHop">{{ row.egress[index2].egressLinkDirection }}</span>
-                <span v-else>{{ row.egress[index2].linkId }}</span>
+                <span v-if="row.nextHop" :test-id="`toNextHop${index3+1}`">{{ item.egressLinkDirection }}</span>
+                <span v-else :test-id="`toLinkId${index3+1}`">{{ item.linkId }}</span>
              </div>

              <div class="item-popover-block">
@@ -49,24 +49,24 @@

                <div style="display: flex">
                  <div class="row-dot">
-                    <div :class="row.egress[index2].usageMore90 ? 'red-dot':'green-dot'"></div>
+                    <div :class="item.usageMore90 ? 'red-dot':'green-dot'"></div>
                  </div>
                  <div class="item-popover-block-content">
                    <div class="block-content-item">
                      <div class="block-content-item-name">{{ $t('linkMonitor.bandwidthUsage') }}</div>

-                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
-                        <div style="margin-left: -10px">
+                      <div class="block-content-item-value" :style="{width: item.valueWidth + 'px'}">
+                        <div :test-id="`egressUsage${gridData.length}-${index2+1}-${index3+1}`" style="margin-left: -10px">
                          <svg class="icon item-popover-up" aria-hidden="true">
                            <use xlink:href="#cn-icon-egress"></use>
                          </svg>
-                          {{ convertValue(row.egress[index2].egressUsage) }}
+                          {{ convertValue(item.egressUsage) }}
                        </div>
-                        <div>
+                        <div :test-id="`ingressUsage${gridData.length}-${index2+1}-${index3+1}`">
                          <svg class="icon item-popover-down" aria-hidden="true">
                            <use xlink:href="#cn-icon-ingress"></use>
                          </svg>
-                          {{ convertValue(row.egress[index2].ingressUsage) }}
+                          {{ convertValue(item.ingressUsage) }}
                        </div>
                      </div>
                    </div>
@@ -74,8 +74,8 @@
                    <div class="block-content-item">
                      <div class="block-content-item-name">{{ $t('linkMonitor.linkBlock.total') }}</div>

-                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
-                        {{ unitConvert(row.egress[index2].totalBitsRate, unitTypes.bps).join('') }}
+                      <div :test-id="`totalBitsRate${gridData.length}-${index2+1}-${index3+1}`" class="block-content-item-value" :style="{width: item.valueWidth + 'px'}">
+                        {{ unitConvert(item.totalBitsRate, unitTypes.bps).join('') }}
                      </div>
                    </div>
                  </div>
@@ -87,48 +87,48 @@

                <div style="display: flex">
                  <div class="row-dot">
-                    <div :class="row.egress[index2].scoreLow3 ? 'red-dot':'green-dot'"></div>
+                    <div :class="item.scoreLow3 ? 'red-dot':'green-dot'"></div>
                  </div>
                  <div class="item-popover-block-content">
                    <div class="block-content-item">
                      <div class="block-content-item-name">{{ $t('linkMonitor.npmScore1') }}</div>
-                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
-                        {{ row.egress[index2].score }}
+                      <div :test-id="`score${gridData.length}-${index2+1}-${index3+1}`" class="block-content-item-value" :style="{width: item.valueWidth + 'px'}">
+                        {{ item.score }}
                      </div>
                    </div>

                    <div class="block-content-item">
                      <div class="block-content-item-name">{{ $t(npmNetworkName[0].name) }}</div>
-                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
-                        {{ unitConvert(row.egress[index2].establishLatencyMs, unitTypes.time).join('') }}
+                      <div :test-id="`tcp${gridData.length}-${index2+1}-${index3+1}`" class="block-content-item-value" :style="{width: item.valueWidth + 'px'}">
+                        {{ unitConvert(item.establishLatencyMs, unitTypes.time).join('') }}
                      </div>
                    </div>

                    <div class="block-content-item">
                      <div class="block-content-item-name">{{ $t(npmNetworkName[1].name) }}</div>
-                      <div class="block-content-item-value" :style="{'width': row.egress[index2].valueWidth + 'px'}">
-                        {{ unitConvert(row.egress[index2].httpResponseLatency, unitTypes.time).join('') }}
+                      <div :test-id="`http${gridData.length}-${index2+1}-${index3+1}`" class="block-content-item-value" :style="{'width': item.valueWidth + 'px'}">
+                        {{ unitConvert(item.httpResponseLatency, unitTypes.time).join('') }}
                      </div>
                    </div>

                    <div class="block-content-item">
                      <div class="block-content-item-name">{{ $t(npmNetworkName[2].name) }}</div>
-                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
-                        {{ unitConvert(row.egress[index2].sslConLatency, unitTypes.time).join('') }}
+                      <div :test-id="`ssl${gridData.length}-${index2+1}-${index3+1}`" class="block-content-item-value" :style="{width: item.valueWidth + 'px'}">
+                        {{ unitConvert(item.sslConLatency, unitTypes.time).join('') }}
                      </div>
                    </div>

                    <div class="block-content-item">
                      <div class="block-content-item-name">{{ $t(npmNetworkName[3].name) }}</div>
-                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
-                        {{ unitConvert(row.egress[index2].tcpLostlenPercent, unitTypes.percent).join('') }}
+                      <div :test-id="`packetLoss${gridData.length}-${index2+1}-${index3+1}`" class="block-content-item-value" :style="{width: item.valueWidth + 'px'}">
+                        {{ unitConvert(item.tcpLostlenPercent, unitTypes.percent).join('') }}
                      </div>
                    </div>

                    <div class="block-content-item">
                      <div class="block-content-item-name">{{ $t(npmNetworkName[4].name) }}</div>
-                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
-                        {{ unitConvert(row.egress[index2].pktRetransPercent, unitTypes.percent).join('') }}
+                      <div :test-id="`packetRetrans${gridData.length}-${index2+1}-${index3+1}`" class="block-content-item-value" :style="{width: item.valueWidth + 'px'}">
+                        {{ unitConvert(item.pktRetransPercent, unitTypes.percent).join('') }}
                      </div>
                    </div>
                  </div>
--- a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
@@ -2,7 +2,7 @@
 <div class="link-traffic-line">
   <link-traffic-drill-down-list
     :chart="chart"
-     :line-data="mpackets"
+     :line-data="tabs[0]"
     :time-filter="timeFilter">
   </link-traffic-drill-down-list>
   <div class="line network link-traffic">
@@ -12,23 +12,25 @@
       <div class="line-header-left">
         <div class="line-value-active" v-if="lineTab"></div>
         <div class="line-value">
-           <div class="line-value-mpackets"
+           <div class="line-value-tabs"
                v-show="item.show"
                :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
-                v-for="(item, index) in mpackets"
+                v-for="(item, index) in tabs"
                :key="index"
                @mouseenter="mouseenter(item)"
                @mouseleave="mouseleave(item)"
-                @click="activeChange(item, index)">
-             <div class="line-value-mpackets-name">
+                @click="activeChange(item, index)"
+                :test-id="`tab-${index}`">
+             <div class="line-value-tabs-name">
               <div :class="item.class"></div>
-               <div class="mpackets-name">{{$t(item.name)}}</div>
+               <div class="tabs-name">{{$t(item.name)}}</div>
             </div>
-             <div class="line-value-unit">
+             <div class="line-value-unit" :test-id="`tabContent${index}`">
               <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
               <span class="line-value-unit-number2">
-              <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
-            </span>
+                 <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span>
+                 <span v-if="item.unitType">{{item.unitType}}</span>
+               </span>
             </div>
           </div>
         </div>
@@ -69,12 +71,12 @@ import unitConvert from '@/utils/unit-convert'
 import { chartColor3, chartColor4, unitTypes } from '@/utils/constants'
 import { getLineType, overwriteUrl, urlParamsHandler } from '@/utils/tools'
 import { getSecond } from '@/utils/date-util'
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
 import * as echarts from 'echarts'
 import { linkTrafficLineChartOption } from '@/views/charts2/charts/options/echartOption'
 import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
+import axios from 'axios'

 export default {
  name: 'LinkTrafficLine',
@@ -112,7 +114,7 @@ export default {
          label: 'Packets/s'
        }
      ],
-      mpackets: [
+      tabs: [
        { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
        { analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
        { analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
@@ -176,13 +178,14 @@ export default {
        }
      }
      this.loading = true
-      get(api.linkMonitor.totalTrafficAnalysis, params).then((res) => {
+      axios.get(api.linkMonitor.totalTrafficAnalysis, { params: params }).then((res) => {
+        res = res.data
        if (res.code === 200) {
          this.showError = false
          this.isNoData = res.data.result.length === 0
          if (this.isNoData) {
            this.lineTab = ''
-            this.mpackets = [
+            this.tabs = [
              { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
              { analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
              { analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
@@ -204,67 +207,69 @@ export default {
      })
    },
    echartsInit (echartsData) {
-      if (this.lineTab) {
-        this.handleActiveBar()
-        echartsData = echartsData.filter(t => t.show === true && t.invertTab === false)
-      } else {
-        echartsData = echartsData.filter(t => t.show === true)
-      }
-      const _this = this
-      const dom = document.getElementById('linkTrafficLineChart')
-      !this.myChart && (this.myChart = echarts.init(dom))
-      this.chartOption = linkTrafficLineChartOption
-      const chartOption = this.chartOption.series[0]
-      this.chartOption.series = echartsData.map((t, i) => {
-        return {
-          ...chartOption,
-          name: t.name,
-          lineStyle: {
-            color: chartColor3[t.positioning],
-            width: 1
-          },
-          stack: t.name !== 'network.total' ? 'network.total' : '',
-          symbolSize: function (value) {
-            return _this.symbolSizeSortChange(i, value[0])
-          },
-          emphasis: {
-            itemStyle: {
-              borderColor: chartColor4[t.positioning],
-              borderWidth: 2,
-              shadowColor: chartColor4[t.positioning],
-              shadowBlur: this.sizes[t.positioning] + 2
-            }
-          },
-          areaStyle: {
-            opacity: 0.1,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: chartColor3[t.positioning]
-              },
-              {
-                offset: 1,
-                color: chartColor3[t.positioning]
-              }
-            ])
-          },
-          data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number'])
+      if (!this.isUnitTesting) {
+        if (this.lineTab) {
+          this.handleActiveBar()
+          echartsData = echartsData.filter(t => t.show === true && t.invertTab === false)
+        } else {
+          echartsData = echartsData.filter(t => t.show === true)
        }
-      })
-      this.chartOption.tooltip.formatter = (params) => {
-        params.forEach(t => {
-          t.seriesName = this.$t(t.seriesName)
-          this.mpackets.forEach(e => {
-            if (this.$t(e.name) === t.seriesName) {
-              t.borderColor = chartColor3[e.positioning]
-            }
-          })
+        const _this = this
+        const dom = document.getElementById('linkTrafficLineChart')
+        !this.myChart && (this.myChart = echarts.init(dom))
+        this.chartOption = linkTrafficLineChartOption
+        const chartOption = this.chartOption.series[0]
+        this.chartOption.series = echartsData.map((t, i) => {
+          return {
+            ...chartOption,
+            name: t.name,
+            lineStyle: {
+              color: chartColor3[t.positioning],
+              width: 1
+            },
+            stack: t.name !== 'network.total' ? 'network.total' : '',
+            symbolSize: function (value) {
+              return _this.symbolSizeSortChange(i, value[0])
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: chartColor4[t.positioning],
+                borderWidth: 2,
+                shadowColor: chartColor4[t.positioning],
+                shadowBlur: this.sizes[t.positioning] + 2
+              }
+            },
+            areaStyle: {
+              opacity: 0.1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: chartColor3[t.positioning]
+                },
+                {
+                  offset: 1,
+                  color: chartColor3[t.positioning]
+                }
+              ])
+            },
+            data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number'])
+          }
        })
-        // const str = stackedLineTooltipFormatter(params)
-        return stackedLineTooltipFormatter(params)
+        this.chartOption.tooltip.formatter = (params) => {
+          params.forEach(t => {
+            t.seriesName = this.$t(t.seriesName)
+            this.tabs.forEach(e => {
+              if (this.$t(e.name) === t.seriesName) {
+                t.borderColor = chartColor3[e.positioning]
+              }
+            })
+          })
+          // const str = stackedLineTooltipFormatter(params)
+          return stackedLineTooltipFormatter(params)
+        }
+        this.showMarkLine = true
+        this.myChart.setOption(this.chartOption)
      }
-      this.showMarkLine = true
-      this.myChart.setOption(this.chartOption)
    },
    activeChange (item, index) {
      if (this.isNoData) return
@@ -296,16 +301,16 @@ export default {
    legendSelectChange (item, index, val) {
      if (index === 'index') {
        this.dispatchLegendSelectAction(item.name)
-      } else if (this.mpackets[index] && this.mpackets[index].name === item.name) {
+      } else if (this.tabs[index] && this.tabs[index].name === item.name) {
        this.dispatchLegendSelectAction(item.name)
-        this.mpackets.forEach((t) => {
+        this.tabs.forEach((t) => {
          if (t.name !== item.name) {
            this.dispatchLegendUnSelectAction(t.name)
          }
        })
      }
      if (val === 'active') {
-        this.mpackets.forEach(t => {
+        this.tabs.forEach(t => {
          if (item.name === t.name) {
            t.invertTab = !t.invertTab
          } else {
@@ -317,7 +322,7 @@ export default {
            } else {
              this.lineTab = t.class
            }
-            this.mpackets.forEach((e) => {
+            this.tabs.forEach((e) => {
              this.dispatchLegendSelectAction(e.name)
            })
          }
@@ -325,8 +330,8 @@ export default {
      }
    },
    handleActiveBar () {
-      if (document.querySelector('.network .line-value-mpackets.is-active')) {
-        const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
+      if (document.querySelector('.network .line-value-tabs.is-active')) {
+        const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-tabs.is-active')
        const activeBar = document.querySelector('.network .line-value-active')
        activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
      }
@@ -339,7 +344,7 @@ export default {
      this.lineTab = ''
      this.handleActiveBar()
      this.showMarkLine = !this.showMarkLine
-      this.mpackets.forEach((e) => {
+      this.tabs.forEach((e) => {
        if (!e.invertTab) {
          e.invertTab = true
        }
@@ -388,9 +393,9 @@ export default {
        })
      }
      lineData.splice(0, 1)
-      const mpackets = _.cloneDeep(this.mpackets)
+      const tabs = _.cloneDeep(this.tabs)
      const unit = val === 'Bits/s' ? 'bps' : 'packets/s'
-      this.legendInit(lineData, active, show, unit, mpackets)
+      this.legendInit(lineData, active, show, unit, tabs)
    },
    legendInit (data, active, show, type, linkData) {
      data.forEach((d, i) => {
@@ -417,17 +422,17 @@ export default {
          }
        }
      })
-      this.mpackets = linkData
+      this.tabs = linkData
      if (num === 3) {
        linkData[0].invertTab = false
        this.lineTab = 'total'
        this.legendSelectChange(linkData[0], 0)
        this.$nextTick(() => {
-          this.echartsInit(this.mpackets)
+          this.echartsInit(this.tabs)
        })
      } else {
        this.$nextTick(() => {
-          this.echartsInit(this.mpackets)
+          this.echartsInit(this.tabs)
          if (!this.lineRefer) this.lineRefer = 'Average'
        })
      }
@@ -436,7 +441,7 @@ export default {
  mounted () {
    this.timer = setTimeout(() => {
      if (this.lineTab) {
-        const data = this.mpackets.find(t => t.class === this.lineTab)
+        const data = this.tabs.find(t => t.class === this.lineTab)
        this.activeChange(data, data.positioning)
      } else {
        this.init()
--- a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue
+++ b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue
@@ -6,36 +6,42 @@
    <div v-else>
      <div class="link-traffic-list-center">
        <div class="link-traffic-list-center-label">{{$t('network.total')}}</div>
-        <div class="link-traffic-list-center-value" v-if="lineData[0] && lineData[0].analysis">{{unitConvert(lineData[0].analysis.avg, unitTypes.bps).join('')}}</div>
+        <div class="link-traffic-list-center-value" v-if="lineData && lineData.analysis" test-id="line-tabContent">
+          <span>{{unitConvert(lineData.analysis.avg, unitTypes.number)[0]}}</span>
+          <span>
+            <span>{{unitConvert(lineData.analysis.avg, unitTypes.number)[1]}}</span>
+            <span v-if="lineData.unitType">{{lineData.unitType}}</span>
+          </span>
+        </div>
      </div>
      <div class="link-traffic-list-center">
        <div class="link-traffic-list-center-label">{{$t('linkMonitor.bandwidthUsage')}}</div>
-        <div class="link-traffic-list-center-value" v-if="bandWidth && lineData[0] && lineData[0].analysis">{{unitConvert(lineData[0].analysis.avg / bandWidth, unitTypes.percent).join('')}}</div>
+        <div class="link-traffic-list-center-value" v-if="lineData && lineData.analysis && bandWidth" test-id="line-percent">{{unitConvert(lineData.analysis.avg / bandWidth, unitTypes.percent).join('')}}</div>
        <div class="link-traffic-list-center-value" v-else>-</div>
      </div>
      <div class="link-traffic-list-center">
        <div class="link-traffic-list-center-label">{{$t('linkMonitor.npmScore')}}</div>
-        <div class="link-traffic-list-center-value">{{linkTrafficListData.npmScore || '-'}}</div>
+        <div class="link-traffic-list-center-value" test-id="line-score">{{linkTrafficListData.npmScore || '-'}}</div>
      </div>
      <div class="link-traffic-list-center">
        <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.tcpConnectionEstablishLatency')}}</div>
-        <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.establishLatencyMs), unitTypes.time).join('')}}</div>
+        <div class="link-traffic-list-center-value" test-id="line-tcp">{{unitConvert(Math.floor(linkTrafficListData.establishLatencyMs), unitTypes.time).join('')}}</div>
      </div>
      <div class="link-traffic-list-center">
        <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.httpResponse')}}</div>
-        <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.httpResponseLatency), unitTypes.time).join('')}}</div>
+        <div class="link-traffic-list-center-value" test-id="line-http">{{unitConvert(Math.floor(linkTrafficListData.httpResponseLatency), unitTypes.time).join('')}}</div>
      </div>
      <div class="link-traffic-list-center">
        <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.sslResponseLatency')}}</div>
-        <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.sslConLatency), unitTypes.time).join('')}}</div>
+        <div class="link-traffic-list-center-value" test-id="line-ssl">{{unitConvert(Math.floor(linkTrafficListData.sslConLatency), unitTypes.time).join('')}}</div>
      </div>
      <div class="link-traffic-list-center">
        <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.packetLoss')}}</div>
-        <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.tcpLostlenPercent, unitTypes.percent).join('')}}</div>
+        <div class="link-traffic-list-center-value" test-id="line-packetLoss">{{unitConvert(linkTrafficListData.tcpLostlenPercent, unitTypes.percent).join('')}}</div>
      </div>
      <div class="link-traffic-list-center">
        <div class="link-traffic-list-center-label">{{$t('overall.packetRetrans')}}</div>
-        <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.pktRetransPercent, unitTypes.percent).join('')}}</div>
+        <div class="link-traffic-list-center-value" test-id="line-packetRetrans">{{unitConvert(linkTrafficListData.pktRetransPercent, unitTypes.percent).join('')}}</div>
      </div>
    </div>
  </div>
@@ -45,7 +51,6 @@
 import chartMixin from '@/views/charts2/chart-mixin'
 import { storageKey, unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -53,6 +58,7 @@ import { getSecond } from '@/utils/date-util'
 import { computeScore } from '@/utils/tools'
 import Loading from '@/components/common/Loading'
 import ChartError from '@/components/common/Error'
+import axios from 'axios'
 export default {
  name: 'linkTrafficList',
  mixins: [chartMixin],
@@ -136,7 +142,8 @@ export default {
        }
      }
      this.loading = true
-      get(api.linkMonitor.networkAnalysis, params).then(res => {
+      axios.get(api.linkMonitor.networkAnalysis, { params: params }).then(res => {
+        res = res.data
        if (res.code === 200) {
          this.showError = false
          this.isNoData = res.data.result.length === 0
@@ -165,6 +172,9 @@ export default {
  },
  mounted () {
    this.linkTrafficData()
+  },
+  beforeUnmount () {
+    this.unitConvert = null
  }
 }
 </script>
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -6,31 +6,31 @@
    </div>

    <div class="app-cards">
-      <div class="app-card" @mouseenter="mouseenter(app)" @mouseleave="mouseleave(app)" v-for="(app, index) in appData" :key="app.type + app.name">
+      <div class="app-card" @mouseenter="mouseenter(app)" @mouseleave="mouseleave(app)" v-for="(app, index) in appData" :key="app.type + app.name" test-id="app-data-card">
        <div class="app-card-title">
          <div class="app-card-title-name">
-            <i class="cn-icon" :class="app.type === 'provider' ? 'cn-icon-entity' : 'cn-icon-app2'"></i>
-            <span @click="drillDownData(app.type, app.name)">{{app.name}}</span>
+            <i class="cn-icon" :class="app.type === 'provider' ? 'cn-icon-entity' : 'cn-icon-app2'" :test-id="`icon${index}`"></i>
+            <span @click="drillDownData(app.type, app.name)" :test-id="`name${index}`">{{app.name}}</span>
          </div>
          <div class="app-card-title-more">
-            <span v-show="app.showMore"><i class="cn-icon cn-icon-more-dark" @mouseenter="mouseenterMore(app)"></i></span>
-            <span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreOptions" @mouseleave="mouseleaveMore(app)"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
+            <span v-show="app.showMore"><i class="cn-icon cn-icon-more-dark" @mouseenter="mouseenterMore(app)" test-id="mouseenter-dark"></i></span>
+            <span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreOptions" @mouseleave="mouseleaveMore(app)" test-id="mouseleave-more"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
          </div>
        </div>
        <div class="app-card__bodys">
          <div class="app-card__body">
            <div class="app-card__body-content">
              <div class="app-card__body-content-value">
-                <div class="app-card__body-content-number">{{unitConvert(app.rate, unitTypes.number).join(' ')}}</div>
-                <div class="app-card__body-content-percent red" v-if="app.value > 0">
+                <div class="app-card__body-content-number" :test-id="`rate${index}`">{{unitConvert(app.rate, unitTypes.number).join(' ')}}</div>
+                <div class="app-card__body-content-percent red" v-if="app.value > 0" :test-id="`percent${index}`">
                  <span v-if="app.value <= 5">
                    +{{unitConvert(app.value, unitTypes.percent).join('')}}
                  </span>
                  <span v-else>>500.00%</span>
                </div>
-                <div class="app-card__body-content-percent green" v-else-if="app.value < 0">
+                <div class="app-card__body-content-percent green" v-else-if="app.value < 0" :test-id="`percent${index}`">
                  <span v-if="app.value >= -5">
-                    -{{unitConvert(app.value, unitTypes.percent).join('').replaceAll('-', '')}}
+                    -{{unitConvert(app.value, unitTypes.percent).join('').replace(/-/g, '')}}
                  </span>
                  <span v-else>>500.00%</span>
                </div>
@@ -39,8 +39,8 @@
            </div>
            <div class="app-card__body-previous">
              <div>Total</div>
-              <div v-if="metric === 'Bits/s'">{{unitConvert(app.total, unitTypes.byte).join(' ')}}</div>
-              <div v-else>{{unitConvert(app.total, unitTypes.number).join(' ')}}</div>
+              <div v-if="metric === 'Bits/s'" :test-id="`total${index}`">{{unitConvert(app.total, unitTypes.byte).join(' ')}}</div>
+              <div v-else :test-id="`total${index}`">{{unitConvert(app.total, unitTypes.number).join(' ')}}</div>
            </div>
          </div>
          <div class="chart__drawing" v-show="!isNoData" :id="`chart-${app.name}-${app.type}`"></div>
@@ -48,7 +48,7 @@
      </div>
      <div class="app-card app-card--create">
        <i class="cn-icon cn-icon-add1" @click="addApp"></i>
-        <span @click="addApp">{{$t('overall.add')}}</span>
+        <span @click="addApp" test-id="add">{{$t('overall.add')}}</span>
      </div>
    </div>
    <el-drawer
@@ -62,7 +62,7 @@
        <div class="add-app__header">
          <div class="header__title">{{$t('overall.add')}}</div>
          <div class="header__operations">
-            <div class="header__operation header__operation--cancel" @click="cancelApp">{{$t('overall.cancel')}}</div>
+            <div class="header__operation header__operation--cancel" @click="cancelApp" test-id="cancel-app">{{$t('overall.cancel')}}</div>
            <div class="header__operation header__operation--save" @click="save">{{$t('overall.save')}}</div>
          </div>
        </div>
@@ -72,15 +72,15 @@
              <div class="body__apps" :class="{'body__apps-no-grid': providerOptions.length === 0}">
                <loading :loading="loadingBody"></loading>
                <chart-no-data v-if="providerOptions.length === 0 && !loadingBody"></chart-no-data>
-                <div class="body__app" v-else :class="{'provide-show': app.provideShow}" v-for="(app, index) in providerOptions" :key="index"  @click="appCheckedChange(app, 0)">
+                <div class="body__app" v-else :class="{'provide-show': app.provideShow}" v-for="(app, index) in providerOptions" :key="index"  @click="appCheckedChange(app, 0)" :test-id="`provide${index}`">
                  <div class="body__app-content">
                    <div class="body__app-left">
-                      <span><i class="cn-icon" :class="app.icon"></i></span>
-                      <span class="body__app-left-title">{{app.value}}</span>
+                      <span><i class="cn-icon" :class="app.icon" :test-id="`provide-icon${index}`"></i></span>
+                      <span class="body__app-left-title" :test-id="`provide-title${index}`">{{app.value}}</span>
                    </div>
                    <div class="body__app-content-right" v-if="app.provideShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
                  </div>
-                  <div class="body__app-value" v-if="app.remark" :title="app.remark">{{app.remark}}</div>
+                  <div class="body__app-value" v-if="app.remark" :title="app.remark" :test-id="`provide-remark${index}`">{{app.remark}}</div>
                  <div v-else>-</div>
                </div>
              </div>
@@ -89,22 +89,22 @@
              <div class="body__apps" :class="{'body__apps-no-grid': appOptions.length === 0}">
                <loading :loading="loadingBody"></loading>
                <chart-no-data v-if="appOptions.length === 0 && !loadingBody"></chart-no-data>
-                <div class="body__app" v-else :class="{'app-show': app.appShow}" v-for="(app, index) in appOptions" :key="index" @click="appCheckedChange(app, 1)">
+                <div class="body__app" v-else :class="{'app-show': app.appShow}" v-for="(app, index) in appOptions" :key="index" @click="appCheckedChange(app, 1)" :test-id="`app${index}`">
                  <div class="body__app-content">
                    <div class="body__app-left">
-                      <span><i class="cn-icon" :class="app.icon"></i></span>
-                      <span class="body__app-left-title">{{app.value}}</span>
+                      <span><i class="cn-icon" :class="app.icon" :test-id="`app-icon${index}`"></i></span>
+                      <span class="body__app-left-title" :test-id="`app-title${index}`">{{app.value}}</span>
                    </div>
                    <div class="body__app-content-right" v-if="app.appShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
                  </div>
-                  <div class="body__app-value" v-if="app.remark" :title="app.remark">{{app.remark}}</div>
+                  <div class="body__app-value" v-if="app.remark" :title="app.remark" :test-id="`app-remark${index}`">{{app.remark}}</div>
                  <div v-else>-</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="body__searcher">
-            <el-input v-model="searcherApp" @input="searcherAppChange" size="mini" :placeholder="$t('networkOverview.search')" prefix-icon="el-icon-search"></el-input>
+            <el-input v-model="searcherApp" @input="searcherAppChange" size="mini" :placeholder="$t('networkOverview.search')" prefix-icon="el-icon-search" test-id="search-input"></el-input>
          </div>
          <div class="body__loading"><loading :loading="loading"></loading></div>
        </div>
@@ -119,7 +119,7 @@ import { storageKey, unitTypes, networkTable, operationType, curTabState } from
 import * as echarts from 'echarts'
 import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
 import { shallowRef } from 'vue'
-import { get, put } from '@/utils/http'
+import { put } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
 import { getSecond } from '@/utils/date-util'
@@ -128,6 +128,7 @@ import loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
+import axios from 'axios'

 export default {
  name: 'NetworkOverviewApps',
@@ -227,8 +228,8 @@ export default {
            return `'${item.name}'`
          }).join(',')
        }
-        prevRequest = get(api.netWorkOverview.applicationCycleTrafficTotal, params)
-        request = get(api.netWorkOverview.applicationTrafficAnalysis, params)
+        prevRequest = axios.get(api.netWorkOverview.applicationCycleTrafficTotal, { params: params })
+        request = axios.get(api.netWorkOverview.applicationTrafficAnalysis, { params: params })
        this.handleData(prevRequest, request, 'app')
      }
      if (providerCards.length > 0) {
@@ -239,15 +240,15 @@ export default {
            return `'${item.name}'`
          }).join(',')
        }
-        prevRequest = get(api.netWorkOverview.appCompanyCycleTrafficTotal, params)
-        request = get(api.netWorkOverview.appCompanyTrafficAnalysis, params)
+        prevRequest = axios.get(api.netWorkOverview.appCompanyCycleTrafficTotal, { params: params })
+        request = axios.get(api.netWorkOverview.appCompanyTrafficAnalysis, { params: params })
        this.handleData(prevRequest, request, 'provider')
      }
    },
    handleData (prevRequest, request, _t) {
      this.toggleLoading(true)
      Promise.all([prevRequest, request]).then(res => {
-        this.isNoData = (res[0].data.result.length && res[1].data.result.length) === 0
+        this.isNoData = (res[0].data.data.result.length && res[1].data.data.result.length) === 0
        if (this.isNoData) {
          this.appData = this.appData.map(t => {
            return {
@@ -256,10 +257,10 @@ export default {
            }
          })
        }
-        if (res[0].code === 200 && res[1].code === 200) {
+        if (res[0].data.code === 200 && res[1].data.code === 200) {
          this.showError = false
-          const prevData = res[0].data.result
-          const data = res[1].data.result
+          const prevData = res[0].data.data.result
+          const data = res[1].data.data.result
          let toCompareType = 'bytes'
          if (this.metric === 'Sessions/s') {
            toCompareType = 'sessions'
@@ -390,38 +391,40 @@ export default {
      this.urlChangeParams = {}
    },
    initChart (obj) {
-      let chart = this.myChart.find(m => m.name === obj.name && m.type === obj.type)
-      if (!chart) {
-        chart = echarts.init(document.getElementById(`chart-${obj.name}-${obj.type}`))
-        const chartOption = _.cloneDeep(appListChartOption)
-        chartOption.series = [{
-          ...chartOption.series[0],
-          data: obj.lineData.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
-          lineStyle: {
-            color: '#35ADDA'
-          },
-          areaStyle: {
-            opacity: 0.1,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: '#35ADDA'
-              },
-              {
-                offset: 1,
-                color: '#35ADDA'
-              }
-            ])
+      if (!this.isUnitTesting) {
+        let chart = this.myChart.find(m => m.name === obj.name && m.type === obj.type)
+        if (!chart) {
+          chart = echarts.init(document.getElementById(`chart-${obj.name}-${obj.type}`))
+          const chartOption = _.cloneDeep(appListChartOption)
+          chartOption.series = [{
+            ...chartOption.series[0],
+            data: obj.lineData.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
+            lineStyle: {
+              color: '#35ADDA'
+            },
+            areaStyle: {
+              opacity: 0.1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#35ADDA'
+                },
+                {
+                  offset: 1,
+                  color: '#35ADDA'
+                }
+              ])
+            }
+          }]
+          chartOption.tooltip.formatter = (params) => {
+            return appStackedLineTooltipFormatter(params)
          }
-        }]
-        chartOption.tooltip.formatter = (params) => {
-          return appStackedLineTooltipFormatter(params)
+          chart.setOption(chartOption)
+          this.myChart.push(chart)
+          this.$nextTick(() => {
+            chart.resize()
+          })
        }
-        chart.setOption(chartOption)
-        this.myChart.push(chart)
-        this.$nextTick(() => {
-          chart.resize()
-        })
      }
    },
    handleScroll (e) {
@@ -458,7 +461,8 @@ export default {
      }
      if (parseFloat(this.appTypeTab) === 0) {
        params.type = 'overviewProvide'
-        get(api.dict, params).then(res => {
+        axios.get(api.dict, { params: params }).then(res => {
+          res = res.data
          if (res.code === 200) {
            res.data.list = res.data.list.filter(l => !this.appData.some(pd => pd.type === 'provider' && pd.name === l.value))
            this.pageObj.pages = res.data.pages
@@ -483,9 +487,10 @@ export default {
        })
      } else if (parseFloat(this.appTypeTab) === 1) {
        params.type = 'overviewApp'
-        get(api.dict, params).then(res => {
-          res.data.list = res.data.list.filter(l => !this.appData.some(pd => pd.type === 'app' && pd.name === l.value))
+        axios.get(api.dict, { params: params }).then(res => {
+          res = res.data
          if (res.code === 200) {
+            res.data.list = res.data.list.filter(l => !this.appData.some(pd => pd.type === 'app' && pd.name === l.value))
            this.pageObj.pages = res.data.pages
            res.data.list.forEach(t => {
              this.toSaveApp.forEach(e => {
@@ -700,7 +705,7 @@ export default {
    }
  },
  mounted () {
-    if (this.chart.params && this.chart.params.app) {
+    if (this.chart && this.chart.params && this.chart.params.app) {
      const userId = parseInt(localStorage.getItem(storageKey.userId))
      const apps = _.cloneDeep(this.chart.params.app)
      let app = apps.find(p => p.user === userId)
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -5,28 +5,29 @@
      <div class="line-header-left">
        <div class="line-value-active" v-if="lineTab"></div>
        <div class="line-value">
-          <div class="line-value-mpackets"
-               v-show="item.show"
-               :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
-               v-for="(item, index) in mpackets"
-               :key="index"
-               @mouseenter="mouseenter(item)"
-               @mouseleave="mouseleave(item)"
-               @click="activeChange(item, index)"
-               :test-id="`tab${index}`"
-          >
-            <div class="line-value-mpackets-name">
-              <div :class="item.class"></div>
-              <div class="mpackets-name">{{$t(item.name)}}</div>
-            </div>
-            <div class="line-value-unit" :test-id="`tabContent${index}`">
-              <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
-              <span class="line-value-unit-number2">
+          <template v-for="(item, index) in tabs">
+            <div class="line-value-tabs"
+                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
+                 v-if="item.show"
+                 :key="index"
+                 @mouseenter="mouseenter(item)"
+                 @mouseleave="mouseleave(item)"
+                 @click="activeChange(item, index)"
+                 :test-id="`tab${index}`"
+            >
+              <div class="line-value-tabs-name">
+                <div :class="item.class"></div>
+                <div class="tabs-name" :test-id="`tabTitle${index}`">{{$t(item.name)}}</div>
+              </div>
+              <div class="line-value-unit" :test-id="`tabContent${index}`">
+                <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
+                <span class="line-value-unit-number2">
                <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span>
                <span v-if="item.unitType">{{item.unitType}}</span>
              </span>
+              </div>
            </div>
-          </div>
+          </template>
        </div>
      </div>
      <div class="line-select line-header-right">
@@ -74,6 +75,8 @@ import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
 import { getLineType, overwriteUrl, urlParamsHandler } from '@/utils/tools'
 import ChartError from '@/components/common/Error'
+import mockData from '../../../../../test/views/charts2/charts/networkOverview/NetworkOverviewLineMockData'
+
 export default {
  name: 'NetworkOverviewLine',
  components: {
@@ -119,7 +122,7 @@ export default {
          label: 'Maximum'
        }
      ],
-      mpackets: [
+      tabsTemplate: [
        { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
        { analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
        { analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' },
@@ -127,6 +130,7 @@ export default {
        { analysis: {}, name: 'network.through', class: 'through', show: true, invertTab: true, positioning: 4, data: [], unitType: '' },
        { analysis: {}, name: 'network.other', class: 'other', show: true, invertTab: true, positioning: 5, data: [], unitType: '' }
      ],
+      tabs: [],
      unitConvert,
      unitTypes,
      chartDateObject: [],
@@ -172,7 +176,7 @@ export default {
    metric (n) {
      this.handleActiveBar()
      this.showMarkLine = !this.showMarkLine
-      this.mpackets.forEach((e) => {
+      this.tabs.forEach((e) => {
        if (!e.invertTab) {
          e.invertTab = true
        }
@@ -195,20 +199,14 @@ export default {
      this.toggleLoading(true)
      axios.get(api.netWorkOverview.totalTrafficAnalysis, { params: params }).then(response => {
        const res = response.data
+        // const res = mockData.bytes.boundary.data
        this.errorMsg = res.message
        if (res.code === 200) {
          this.isNoData = res.data.result.length === 0
          this.showError = false
          if (this.isNoData) {
            this.lineTab = ''
-            this.mpackets = [
-              { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
-              { analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
-              { analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' },
-              { analysis: {}, name: 'network.internal', class: 'internal', show: true, invertTab: true, positioning: 3, data: [], unitType: '' },
-              { analysis: {}, name: 'network.through', class: 'through', show: true, invertTab: true, positioning: 4, data: [], unitType: '' },
-              { analysis: {}, name: 'network.other', class: 'other', show: true, invertTab: true, positioning: 5, data: [], unitType: '' }
-            ]
+            this.tabs = _.cloneDeep(this.tabsTemplate)
          } else {
            this.initData(res.data.result, val, active, show, n)
          }
@@ -346,7 +344,7 @@ export default {
        this.chartOption.tooltip.formatter = (params) => {
          params.forEach(t => {
            t.seriesName = this.$t(t.seriesName)
-            this.mpackets.forEach(e => {
+            this.tabs.forEach(e => {
              if (this.$t(e.name) === t.seriesName) {
                t.borderColor = chartColor3[e.positioning]
              }
@@ -436,16 +434,16 @@ export default {
    legendSelectChange (item, index, val) {
      if (index === 'index') {
        this.dispatchLegendSelectAction(item.name)
-      } else if (this.mpackets[index] && this.mpackets[index].name === item.name) {
+      } else if (this.tabs[index] && this.tabs[index].name === item.name) {
        this.dispatchLegendSelectAction(item.name)
-        this.mpackets.forEach((t) => {
+        this.tabs.forEach((t) => {
          if (t.name !== item.name) {
            this.dispatchLegendUnSelectAction(t.name)
          }
        })
      }
      if (val === 'active') {
-        this.mpackets.forEach(t => {
+        this.tabs.forEach(t => {
          if (item.name === t.name) {
            t.invertTab = !t.invertTab
          } else {
@@ -457,7 +455,7 @@ export default {
            } else {
              this.lineTab = t.class
            }
-            this.mpackets.forEach((e) => {
+            this.tabs.forEach((e) => {
              this.dispatchLegendSelectAction(e.name)
            })
          }
@@ -465,8 +463,8 @@ export default {
      }
    },
    handleActiveBar () {
-      if (document.querySelector('.network .line-value-mpackets.is-active')) {
-        const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
+      if (document.querySelector('.network .line-value-tabs.is-active')) {
+        const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-tabs.is-active')
        const activeBar = document.querySelector('.network .line-value-active')
        activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
      }
@@ -478,9 +476,9 @@ export default {
      this.lineRefer = val
      let echartsData
      if (this.lineTab) {
-        echartsData = this.mpackets.filter(t => t.show === true && t.invertTab === false)
+        echartsData = this.tabs.filter(t => t.show === true && t.invertTab === false)
      } else {
-        echartsData = this.mpackets.filter(t => t.show === true)
+        echartsData = this.tabs.filter(t => t.show === true)
      }
      if (!this.isUnitTesting) {
        const chartOption = this.myChart.getOption()
@@ -570,12 +568,12 @@ export default {
      }
      lineData.splice(0, 1)
      if (val === 'Sessions/s') {
-        const mpackets = _.cloneDeep(this.mpackets)
+        const tabs = _.cloneDeep(this.tabsTemplate)
        lineData.forEach((d, i) => {
-          mpackets[i].data = d.values
-          mpackets[i].analysis = d.analysis
+          tabs[i].data = d.values
+          tabs[i].analysis = d.analysis
        })
-        mpackets.forEach((e, i) => {
+        tabs.forEach((e, i) => {
          if (i !== 0) {
            e.show = false
          }
@@ -584,9 +582,9 @@ export default {
          this.lineTab = 'total'
          this.legendSelectChange(e, 0)
        })
-        this.mpackets = mpackets
+        this.tabs = tabs
        this.$nextTick(() => {
-          this.echartsInit(this.mpackets, true)
+          this.echartsInit(this.tabs, true)
        })
      } else {
        const unit = val === 'Bits/s' ? 'bps' : 'packets/s'
@@ -594,15 +592,15 @@ export default {
      }
    },
    legendInit (data, active, show, type, n) {
-      const mpackets = _.cloneDeep(this.mpackets)
+      const tabs = _.cloneDeep(this.tabsTemplate)
      data.forEach((d, i) => {
-        mpackets[i].data = d.values
-        mpackets[i].analysis = d.analysis
+        tabs[i].data = d.values
+        tabs[i].analysis = d.analysis
      })
      let num = 0
-      mpackets.forEach(e => {
+      tabs.forEach(e => {
        e.unitType = type
-        if (e.name !== 'network.total' && parseFloat(e.analysis.avg) === 0) {
+        if (e.name !== 'network.total' && parseFloat(e.analysis.avg) == 0) {
          e.show = false
          num += 1
        } else {
@@ -619,18 +617,18 @@ export default {
          }
        }
      })
-      this.mpackets = mpackets
+      this.tabs = tabs
      if (num === 5) {
-        mpackets[0].invertTab = false
+        tabs[0].invertTab = false
        this.lineTab = 'total'
-        this.legendSelectChange(mpackets[0], 0)
+        this.legendSelectChange(tabs[0], 0)
        this.$nextTick(() => {
-          this.echartsInit(this.mpackets, true)
+          this.echartsInit(this.tabs, true)
        })
      } else {
        if (n) this.lineTab = ''
        this.$nextTick(() => {
-          this.echartsInit(this.mpackets, show)
+          this.echartsInit(this.tabs, show)
          if (!this.lineRefer) this.lineRefer = 'Average'
        })
      }
@@ -657,7 +655,7 @@ export default {
    this.chartOption = null
    this.timer = setTimeout(() => {
      if (this.lineTab && this.metric !== 'Sessions/s') {
-        const data = this.mpackets.find(t => t.class === this.lineTab)
+        const data = this.tabsTemplate.find(t => t.class === this.lineTab)
        this.activeChange(data, data.positioning)
      } else {
        this.init()
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -197,7 +197,6 @@ export default {
      const lastCycleTrafficRequest = axios.get(api.npm.overview.appTrafficAnalysis, { params: { ...params, cycle: 1 } })
      this.toggleLoading(true)
      Promise.all([currentTrafficRequest, lastCycleTrafficRequest]).then(res => {
-        // console.log('打印数据=====', res)
        if (res[0].data.code === 200 && res[1].data.code === 200) {
          this.showError = false
          this.errorMsg = ''
--- a/src/views/charts2/charts/npm/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/npm/NpmAppEventTable.vue
@@ -1,29 +1,11 @@
 <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">
-        <el-option
-            v-for="item in options"
-            :key="item.label"
-            :label="item.label"
-            :value="item.value"
-        />
-      </el-select>
-      <span>{{ $t('network.metric') }}：</span>
-    </div>-->
    <el-table
        id="tabTable"
        ref="dataTable"
        :data="tableData"
        class="npm-app-event-table"
+        :row-class-name="rowClassName"
        height="100%"
        empty-text=""
    >
@@ -33,34 +15,33 @@
            <span class="data-column__span">{{ $t(item.label) }}</span>
          </template>
          <template #default="scope" :column="item">
-            <div class="data-app-event-table">
+            <div class="data-app-event-table"  :test-id="`${item.prop}${scope.row.index}`">
              <template v-if="item.prop === 'domain' ||item.prop === 'appName' ||item.prop === 'serverIp' ">
                <span class="data-applications">{{ scope.row[item.prop] }}</span>
              </template>
-              <template v-else-if="item.prop === 'eventSeverity'">
+              <template v-else-if="item.prop === 'eventSeverity'" >
                <template v-if="scope.row[item.prop]==='critical'">
-                  <div v-for="item in 5" class="red-dot" :key="item"></div>
+                  <div v-for="item in 5" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
                </template>
                <template v-else-if="scope.row[item.prop]==='high'">
-                  <div v-for="item in 4" class="red-dot" :key="item"></div>
-                  <div class="grey-dot"></div>
+                  <div v-for="item in 4" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
+                  <div v-for="item in 1" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${4+item}`"></div>
                </template>
                <template v-else-if="scope.row[item.prop]==='medium'">
-                  <div v-for="item in 3" class="red-dot" :key="item"></div>
-                  <div v-for="item in 2" class="grey-dot" :key="item"></div>
+                  <div v-for="item in 3" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
+                  <div v-for="item in 2" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${3+item}`"></div>
                </template>
                <template v-else-if="scope.row[item.prop]==='low'">
-                  <div v-for="item in 2" class="red-dot" :key="item"></div>
-                  <div v-for="item in 3" class="grey-dot" :key="item"></div>
+                  <div v-for="item in 2" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
+                  <div v-for="item in 3" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${2+item}`"></div>
                </template>
                <template v-else-if="scope.row[item.prop]==='info'">
-                  <div v-for="item in 1" class="red-dot" :key="item"></div>
-                  <div v-for="item in 4" class="grey-dot" :key="item"></div>
+                  <div v-for="item in 1" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
+                  <div v-for="item in 4" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${1+item}`"></div>
                </template>
                <span class="data-severity">{{ 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">{{ scope.row[item.prop] }}</span>
              </template>
              <template v-else-if="item.prop === 'count'">
@@ -153,6 +134,10 @@ export default {
    this.init()
  },
  methods: {
+    rowClassName ({ row, rowIndex }) {
+      // 把每一行的索引放进row
+      row.index = rowIndex
+    },
    init () {
      this.toggleLoading(true)
      this.isNoData = false
--- a/src/views/charts2/charts/npm/NpmEventsByType.vue
+++ b/src/views/charts2/charts/npm/NpmEventsByType.vue
@@ -13,14 +13,14 @@
            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
            <template v-for="(legend, index) in chartData" :key="index">
              <div class="npm-event-pie-legend-type">
-                <div class="npm-event-pie-legend-type-severity">{{legend.name}}</div>
+                <div class="npm-event-pie-legend-type-severity" :test-id="`testNode${index}`">{{legend.name}}</div>
              </div>
            </template>
          </div>
          <div class="npm-event-pie-legend">
            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
            <template v-for="(legend, index) in chartData" :key="index">
-              <div class="npm-event-pie-legend-total">{{legend.value}}</div>
+              <div class="npm-event-pie-legend-total" :test-id="`total${index}`">{{legend.value}}</div>
            </template>
          </div>
        </div>
@@ -31,7 +31,6 @@

 <script>
 import { shallowRef } from 'vue'
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import * as echarts from 'echarts'
 import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
@@ -39,6 +38,7 @@ import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartError from '@/components/common/Error'
+import axios from 'axios'

 export default {
  name: 'NpmEventsByType',
@@ -108,7 +108,8 @@ export default {
        type: 'severity'
      }
      this.toggleLoading(true)
-      get(api.npm.events.recentEvents, params).then(res => {
+      axios.get(api.npm.events.recentEvents, { params: params }).then(res => {
+        res = res.data
        if (res.code === 200) {
          this.showError = false
          this.isNoData = res.data.result.length === 0
@@ -126,7 +127,9 @@ export default {
          this.chartData = arrData.sort((a, b) => { return b.value - a.value })
          this.$nextTick(() => {
            if (this.chartData.length > 0) {
-              this.init()
+              if (!this.isUnitTesting) {
+                this.init()
+              }
            }
          })
        } else {
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -29,7 +29,7 @@
              <template v-else-if="item.prop === 'eventType'">
                <span class="data-recent-table-eventType" :test-id="`eventType-${scope.row.eventType}-${scope.$index}`">{{scope.row[item.prop]}}</span>
              </template>
-              <span v-else-if="scope.row[item.prop]" :test-id="`startTime-${scope.row.startTime}-${scope.$index}`">{{scope.row[item.prop]}}</span>
+              <span v-else-if="scope.row[item.prop]" :test-id="`startTime-${scope.$index}`">{{scope.row[item.prop]}}</span>
              <span v-else>-</span>
            </div>
          </template>
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -71,7 +71,7 @@ export default {
      unitConvert,
      unitTypes,
      side: '',
-      mpackets: [
+      tabs: [
        { name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
        { name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
        { name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
@@ -199,7 +199,7 @@ export default {
            this.showError = false
            this.isNoData = res.data.result.length === 0
            if (this.isNoData) {
-              this.mpackets = [
+              this.tabs = [
                { name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
                { name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
                { name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
@@ -249,7 +249,7 @@ export default {
          this.showError = false
          this.isNoData = npmLineData.length === 0
          if (this.isNoData) {
-            this.mpackets = [
+            this.tabs = [
              { name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
              { name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
              { name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
@@ -320,7 +320,7 @@ export default {
          })
          this.chartOption.tooltip.formatter = (params) => {
            params.forEach(t => {
-              this.mpackets.forEach(e => {
+              this.tabs.forEach(e => {
                if (e.name === t.seriesName) {
                  t.borderColor = chartColor3[e.positioning]
                }
@@ -405,24 +405,24 @@ export default {
        })
      }
      lineData.splice(0, 1)
-      const mpackets = _.cloneDeep(this.mpackets)
+      const tabs = _.cloneDeep(this.tabs)
      const npmQuantity = _.cloneDeep(this.npmQuantity)
      if (val === 'Sessions/s') {
        lineData.forEach((d, i) => {
-          mpackets[i].data = d.values
-          mpackets[i].analysis = d.analysis
+          tabs[i].data = d.values
+          tabs[i].analysis = d.analysis
        })
-        mpackets.forEach((e, i) => {
+        tabs.forEach((e, i) => {
          if (i !== 0) {
            e.show = false
          }
        })
-        this.mpackets = mpackets
-        this.echartsInit(this.mpackets)
+        this.tabs = tabs
+        this.echartsInit(this.tabs)
      } else if (val !== 'Bits/s' && val !== 'Packets/s' && val !== 'Sessions/s') {
        this.legendInit(lineData, npmQuantity, true)
      } else {
-        this.legendInit(lineData, mpackets, false)
+        this.legendInit(lineData, tabs, false)
      }
    },
    legendInit (data, npmData, show) {
@@ -445,8 +445,8 @@ export default {
        npmData.forEach((e) => {
          e.show = true
        })
-        this.mpackets = npmData
-        this.echartsInit(this.mpackets)
+        this.tabs = npmData
+        this.echartsInit(this.tabs)
      }
    }
  },
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -205,7 +205,7 @@ export default {
     */
    initExpendTab () {
      if (this.$route.query.eventId) {
-        if (parseFloat(this.$route.query.eventId) === this.detection.eventId) {
+        if (this.$route.query.eventId === this.detection.eventId) {
          const container = document.getElementById('cnContainer')
          const dom = document.getElementsByClassName('cn-detection__case')
          // 未展开的item折叠块，高度67+下边距10+底部线高度1，兼容不同分辨率下的tab高度
--- a/test/views/charts2/charts/linkMonitor/LinkBlock.test.js
+++ b/test/views/charts2/charts/linkMonitor/LinkBlock.test.js
@@ -0,0 +1,130 @@
+import linkBlock from '@/views/charts2/charts/linkMonitor/LinkBlock'
+import { mount } from '@vue/test-utils'
+import axios from 'axios'
+
+const mockGet1 = {
+  data: { status: 200, code: 200, queryKey: '549b4c3bcabf0feee193b834671879de', success: true, message: null, statistics: { elapsed: 3, rows_read: 11480, bytes_read: 459200, result_size: 1214, result_rows: 21 }, job: null, formatType: 'json', meta: [{ name: 'link_id', type: 'string', category: 'Dimension' }, { name: 'egress_bytes', type: 'long', category: 'Metric' }, { name: 'ingress_bytes', type: 'long', category: 'Metric' }], data: { resultType: 'table', result: [{ linkId: '257', egressBytes: '0', egressBitsRate: 0, ingressBytes: '493739879', ingressBitsRate: 1097199.76 }, { linkId: '256', egressBytes: '4147998874', egressBitsRate: 9217775.28, ingressBytes: '0', ingressBitsRate: 0 }, { linkId: '1024', egressBytes: '4229808296', egressBitsRate: 9399574, ingressBytes: '0', ingressBitsRate: 0 }, { linkId: '1793', egressBytes: '0', egressBitsRate: 0, ingressBytes: '604840505', ingressBitsRate: 1344090 }, { linkId: '2817', egressBytes: '0', egressBitsRate: 0, ingressBytes: '430811638', ingressBitsRate: 957359.2 }, { linkId: '0', egressBytes: '819878366014', egressBitsRate: 1821951924.48, ingressBytes: '140774357362', ingressBitsRate: 312831905.28 }, { linkId: '1281', egressBytes: '0', egressBitsRate: 0, ingressBytes: '544675122', ingressBitsRate: 1210389.12 }, { linkId: '2049', egressBytes: '0', egressBitsRate: 0, ingressBytes: '711346274', ingressBitsRate: 1580769.52 }, { linkId: '1536', egressBytes: '4195896971', egressBitsRate: 9324215.52, ingressBytes: '0', ingressBitsRate: 0 }, { linkId: '2305', egressBytes: '0', egressBitsRate: 0, ingressBytes: '524865003', ingressBitsRate: 1166366.64 }, { linkId: '1792', egressBytes: '4145790227', egressBitsRate: 9212867.2, ingressBytes: '0', ingressBitsRate: 0 }, { linkId: '1025', egressBytes: '0', egressBitsRate: 0, ingressBytes: '492227445', ingressBitsRate: 1093838.8 }, { linkId: '2816', egressBytes: '4000074817', egressBitsRate: 8889055.12, ingressBytes: '0', ingressBitsRate: 0 }, { linkId: '513', egressBytes: '0', egressBitsRate: 0, ingressBytes: '1444814826', ingressBitsRate: 3210699.6 }, { linkId: '768', egressBytes: '4370006099', egressBitsRate: 9711124.64, ingressBytes: '0', ingressBitsRate: 0 }, { linkId: '512', egressBytes: '3894190397', egressBitsRate: 8653756.4, ingressBytes: '0', ingressBitsRate: 0 }, { linkId: '769', egressBytes: '0', egressBitsRate: 0, ingressBytes: '1877580759', ingressBitsRate: 4172401.68 }, { linkId: '2304', egressBytes: '3767761711', egressBitsRate: 8372803.84, ingressBytes: '0', ingressBitsRate: 0 }, { linkId: '1537', egressBytes: '0', egressBitsRate: 0, ingressBytes: '367986916', ingressBitsRate: 817748.72 }, { linkId: '1280', egressBytes: '4040444894', egressBitsRate: 8978766.4, ingressBytes: '0', ingressBitsRate: 0 }, { linkId: '2048', egressBytes: '4682050724', egressBitsRate: 10404557.2, ingressBytes: '0', ingressBitsRate: 0 }] }, originalUrl: 'http://192.168.44.55:9999?query=SELECT%20arrayJoin%28splitByChar%28%27_%27%2C%20concat%28toString%28common_egress_link_id%29%2C%20%27_%27%2C%20toString%28common_ingress_link_id%29%29%29%29%20AS%20link_id%2CSUM%28IF%28toString%28common_egress_link_id%29%20%3D%20link_id%2C%20traffic_outbound_byte%2C%200%29%29%20AS%20egress_bytes%2CSUM%28IF%28toString%28common_ingress_link_id%29%20%3D%20link_id%2C%20traffic_inbound_byte%2C%200%29%29%20AS%20ingress_bytes%20FROM%20metric_link%20WHERE%20stat_time%20%3E%3D%201675303793%20AND%20stat_time%20%3C%201675307393%20GROUP%20BY%20link_id&format=json&option=real-time', msg: 'OK' }
+}
+const mockGet2 = {
+  data: { status: 200, code: 200, queryKey: 'ee2e820b1275748167cdee82b2b4ea40', success: true, message: null, statistics: { elapsed: 3, rows_read: 11480, bytes_read: 618564, result_size: 1053, result_rows: 10 }, job: null, formatType: 'json', meta: [{ name: 'egress_link_direction', type: 'string', category: 'Dimension' }, { name: 'ingress_link_direction', type: 'string', category: 'Dimension' }, { name: 'egress_bytes', type: 'long', category: 'Metric' }, { name: 'ingress_bytes', type: 'long', category: 'Metric' }], data: { resultType: 'table', result: [{ egressLinkDirection: '太原', ingressLinkDirection: '西宁', egressBytes: '2407509269', egressBitsRate: 5350020.56, ingressBytes: '193368911', ingressBitsRate: 429708.72 }, { egressLinkDirection: '西安', ingressLinkDirection: '西安', egressBytes: '3609358392', egressBitsRate: 8020796.4, ingressBytes: '345009143', ingressBitsRate: 766686.96 }, { egressLinkDirection: '西宁', ingressLinkDirection: '西安', egressBytes: '1273508499', egressBitsRate: 2830018.88, ingressBytes: '122646511', ingressBitsRate: 272547.84 }, { egressLinkDirection: '太原', ingressLinkDirection: '太原', egressBytes: '14840136119', egressBitsRate: 32978080.24, ingressBytes: '3386427658', ingressBitsRate: 7525394.8 }, { egressLinkDirection: '西安', ingressLinkDirection: '太原', egressBytes: '7070361369', egressBitsRate: 15711914.16, ingressBytes: '1853445429', ingressBitsRate: 4118767.6 }, { egressLinkDirection: '西宁', ingressLinkDirection: '太原', egressBytes: '2619231460', egressBitsRate: 5820514.32, ingressBytes: '291561196', ingressBitsRate: 647913.76 }, { egressLinkDirection: '', ingressLinkDirection: '', egressBytes: '409939183007', egressBitsRate: 910975962.24, ingressBytes: '70387178681', ingressBitsRate: 156415952.64 }, { egressLinkDirection: '太原', ingressLinkDirection: '西安', egressBytes: '7808050741', egressBitsRate: 17351223.84, ingressBytes: '1001570985', ingressBitsRate: 2225713.28 }, { egressLinkDirection: '西宁', ingressLinkDirection: '西宁', egressBytes: '337068337', egressBitsRate: 749040.72, ingressBytes: '165230290', ingressBitsRate: 367178.4 }, { egressLinkDirection: '西安', ingressLinkDirection: '西宁', egressBytes: '1508798824', egressBitsRate: 3352886.24, ingressBytes: '133628244', ingressBitsRate: 296951.68 }] }, originalUrl: 'http://192.168.44.55:9999?query=SELECT%20egress_link_direction%20AS%20egress_link_direction%2C%20ingress_link_direction%20AS%20ingress_link_direction%2C%20SUM%28traffic_outbound_byte%29%20AS%20egress_bytes%2C%20SUM%28traffic_inbound_byte%29%20AS%20ingress_bytes%20FROM%20metric_link%20WHERE%20stat_time%20%3E%3D%201675303793%20AND%20stat_time%20%3C%201675307393%20GROUP%20BY%20egress_link_direction%2C%20ingress_link_direction&format=json&option=real-time', msg: 'OK' }
+}
+const linkInfoData = [{ originalLinkId: '256', linkId: 'Hundredgige1', direction: 'egress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '257', linkId: 'Hundredgige1', direction: 'ingress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '512', linkId: 'Hundredgige2', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '513', linkId: 'Hundredgige2', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '768', linkId: 'Hundredgige3', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '769', linkId: 'Hundredgige3', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '1024', linkId: 'Hundredgige4', direction: 'egress', nextHop: '西宁', bandwidth: 100000000000 }, { originalLinkId: '1025', linkId: 'Hundredgige4', direction: 'ingress', nextHop: '西宁', bandwidth: 100000000000 }, { originalLinkId: '1280', linkId: 'Hundredgige5', direction: 'egress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '1281', linkId: 'Hundredgige5', direction: 'ingress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '1536', linkId: 'Hundredgige6', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '1537', linkId: 'Hundredgige6', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '1792', linkId: 'Hundredgige7', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '1793', linkId: 'Hundredgige7', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2048', linkId: 'Hundredgige8', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2049', linkId: 'Hundredgige8', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2304', linkId: 'Hundredgige9', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2305', linkId: 'Hundredgige9', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2816', linkId: 'Hundredgige10', direction: 'egress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '2817', linkId: 'Hundredgige10', direction: 'ingress', nextHop: '西安', bandwidth: 100000000000 }]
+const linkInfo = JSON.stringify(linkInfoData)
+const timeFilter = {
+  dateRangeValue: -1,
+  startTime: 1673244000000,
+  endTime: 1673247600000
+}
+
+var wrapper = null
+
+/**
+ * 进行axios请求，并挂载vue实例
+ * @param list
+ */
+function axiosPostAndMounted (list) {
+  require('vue-router').useRoute.mockReturnValue({ query: {} })
+
+  const data = list || mockGet1
+  // 模拟axios返回数据
+  axios.get.mockImplementation(url => {
+    switch (url) {
+      case '/interface/link/overview/analysis':
+        return Promise.resolve(data)
+      case '/interface/link/overview/nextHopAnalysis':
+        return Promise.resolve(mockGet2)
+    }
+  })
+
+  // 模拟localStorage获取数据
+  // eslint-disable-next-line no-proto
+  jest.spyOn(localStorage.__proto__, 'getItem').mockImplementation(key => linkInfo)
+
+  // 加载vue组件，获得实例
+  wrapper = mount(linkBlock, {
+    propsData: {
+      timeFilter
+    }
+  })
+}
+
+describe('views/charts2/charts/linkMonitor/LinkBlock.vue测试', () => {
+  test('测试链路蜂窝图和下一跳蜂窝图从大到小排列', async () => {
+    axiosPostAndMounted()
+
+    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
+    await new Promise(resolve => setTimeout(() => {
+      const linkBlockTotal0 = wrapper.get('[test-id="linkBlockTotal0"]')
+      const linkBlockTotal1 = wrapper.get('[test-id="linkBlockTotal1"]')
+      const linkBlockTotal2 = wrapper.get('[test-id="linkBlockTotal2"]')
+      const linkBlockTotal3 = wrapper.get('[test-id="linkBlockTotal3"]')
+      const linkBlockTotal4 = wrapper.get('[test-id="linkBlockTotal4"]')
+      const linkBlockTotal5 = wrapper.get('[test-id="linkBlockTotal5"]')
+      const linkBlockTotal6 = wrapper.get('[test-id="linkBlockTotal6"]')
+      const linkBlockTotal7 = wrapper.get('[test-id="linkBlockTotal7"]')
+      const linkBlockTotal8 = wrapper.get('[test-id="linkBlockTotal8"]')
+      const linkBlockTotal9 = wrapper.get('[test-id="linkBlockTotal9"]')
+
+      expect(linkBlockTotal0.text()).toBe('13.88 Mbps')
+      expect(linkBlockTotal1.text()).toBe('11.99 Mbps')
+      expect(linkBlockTotal2.text()).toBe('11.86 Mbps')
+      expect(linkBlockTotal3.text()).toBe('10.56 Mbps')
+      expect(linkBlockTotal4.text()).toBe('10.49 Mbps')
+      expect(linkBlockTotal5.text()).toBe('10.31 Mbps')
+      expect(linkBlockTotal6.text()).toBe('10.19 Mbps')
+      expect(linkBlockTotal7.text()).toBe('10.14 Mbps')
+      expect(linkBlockTotal8.text()).toBe('9.85 Mbps')
+      expect(linkBlockTotal9.text()).toBe('9.54 Mbps')
+
+      const nextHopTotal0 = wrapper.get('[test-id="nextHopTotal0"]')
+      const nextHopTotal1 = wrapper.get('[test-id="nextHopTotal1"]')
+      const nextHopTotal2 = wrapper.get('[test-id="nextHopTotal2"]')
+
+      expect(nextHopTotal0.text()).toBe('67.97 Mbps')
+      expect(nextHopTotal1.text()).toBe('30.35 Mbps')
+      expect(nextHopTotal2.text()).toBe('10.49 Mbps')
+      resolve()
+    }, 200))
+  })
+  test('鼠标移动到链路蜂窝图第一个，测试total显示', async () => {
+    // 以"Hundredgige3"为例，对应出方向linkId为768，对应出方向流量为9711124.64
+    // 对应入方向linkId为769，对应入方向流量为4172401.68，修改流量测试total
+    const list = JSON.parse(JSON.stringify(mockGet1))
+    list.data.data.result[14].egressBitsRate = 9000000.00
+    list.data.data.result[16].ingressBitsRate = 4000000.00
+
+    axiosPostAndMounted(list)
+
+    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
+    await new Promise(resolve => setTimeout(() => {
+      const linkBlockTotal0 = wrapper.get('[test-id="linkBlockTotal0"]')
+      const linkBlockEgressUsage0 = wrapper.get('[test-id="linkBlockEgressUsage0"]')
+      const linkBlockIngressUsage0 = wrapper.get('[test-id="linkBlockIngressUsage0"]')
+
+      expect(linkBlockTotal0.text()).toBe('13 Mbps')
+      expect(linkBlockEgressUsage0.text()).toBe('< 0.01%')
+      expect(linkBlockIngressUsage0.text()).toBe('< 0.01%')
+      resolve()
+    }, 200))
+  })
+  test('鼠标移动到链路蜂窝图第一个，测试出入流量占比', async () => {
+    // 以"Hundredgige3"为例，修改其出入流量为100000000000，测试上行流量占比为100%，下行占比为0%的情况
+    const list = JSON.parse(JSON.stringify(mockGet1))
+    list.data.data.result[14].egressBitsRate = 100000000000.00
+    list.data.data.result[16].ingressBitsRate = 0
+
+    axiosPostAndMounted(list)
+
+    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
+    await new Promise(resolve => setTimeout(() => {
+      const linkBlockTotal0 = wrapper.get('[test-id="linkBlockTotal0"]')
+      const linkBlockEgressUsage0 = wrapper.get('[test-id="linkBlockEgressUsage0"]')
+      const linkBlockIngressUsage0 = wrapper.get('[test-id="linkBlockIngressUsage0"]')
+
+      expect(linkBlockTotal0.text()).toBe('100 Gbps')
+      expect(linkBlockEgressUsage0.text()).toBe('100.00%')
+      expect(linkBlockIngressUsage0.text()).toBe('0%')
+      resolve()
+    }, 200))
+  })
+})
--- a/test/views/charts2/charts/linkMonitor/LinkDirectionGrid.test.js
+++ b/test/views/charts2/charts/linkMonitor/LinkDirectionGrid.test.js
--- a/test/views/charts2/charts/linkMonitor/LinkTrafficLine.test.js
+++ b/test/views/charts2/charts/linkMonitor/LinkTrafficLine.test.js
--- a/test/views/charts2/charts/networkOverview/NetworkOverviewApps.test.js
+++ b/test/views/charts2/charts/networkOverview/NetworkOverviewApps.test.js
--- a/test/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.test.js
+++ b/test/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.test.js
@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils'
 import axios from 'axios'

 const mockGet = {
-  data: {"status":200,"code":200,"queryKey":"dec6723e173e8fa2b00917dc597bfb27","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":58,"result_rows":1},"job":null,"formatType":"json","meta":[{"name":"attack_event_count","type":"long","category":"Metric"},{"name":"attacker_count","type":"long","category":"Metric"},{"name":"victim_count","type":"long","category":"Metric"}],"data":{"resultType":"object","result":[{"attackEventCount":1200000,"attackerCount":2687878,"victimCount":36676767}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20COUNT%28*%29%20AS%20attack_event_count%2C%20COUNT%28DISTINCT%28offender_ip%29%29%20AS%20attacker_count%2C%20COUNT%28DISTINCT%28victim_ip%29%29%20AS%20victim_count%20FROM%20security_event%20WHERE%20start_time%20%3E%3D%201675043912%20AND%20start_time%20%3C%201675047512%20AND%20security_type%20%3D%20%27ddos%27&format=json&option=real-time","msg":"OK"}
+  data: { status: 200, code: 200, queryKey: 'dec6723e173e8fa2b00917dc597bfb27', success: true, message: null, statistics: { elapsed: 0, rows_read: 2, result_size: 58, result_rows: 1 }, job: null, formatType: 'json', meta: [{ name: 'attack_event_count', type: 'long', category: 'Metric' }, { name: 'attacker_count', type: 'long', category: 'Metric' }, { name: 'victim_count', type: 'long', category: 'Metric' }], data: { resultType: 'object', result: [{ attackEventCount: 1200000, attackerCount: 2687878, victimCount: 36676767 }] }, originalUrl: 'http://192.168.44.55:9999?query=SELECT%20COUNT%28*%29%20AS%20attack_event_count%2C%20COUNT%28DISTINCT%28offender_ip%29%29%20AS%20attacker_count%2C%20COUNT%28DISTINCT%28victim_ip%29%29%20AS%20victim_count%20FROM%20security_event%20WHERE%20start_time%20%3E%3D%201675043912%20AND%20start_time%20%3C%201675047512%20AND%20security_type%20%3D%20%27ddos%27&format=json&option=real-time', msg: 'OK' }
 }

 const timeFilter = {
--- a/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js
+++ b/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js
@@ -1,22 +1,77 @@
 import NetworkOverviewLine from '@/views/charts2/charts/networkOverview/NetworkOverviewLine'
 import { mount } from '@vue/test-utils'
 import axios from 'axios'
+import mockData from './NetworkOverviewLineMockData'

-const mockGet = {
-  data: {"status":200,"code":200,"success":true,"message":null,"formatType":"json","data":{"resultType":"object","result":[{"type":"bytes","totalBitsRate":{"values":[[1673247564,"96801019.52"]],"analysis":{"avg":"112042808.24","max":"301842105.76","min":"52096324","p95":"168089003.35199997"}},"inboundBitsRate":{"values":[[1673247564,"11814508.48"]],"analysis":{"avg":"18587597.36","max":"137528138.88","min":"3181142.88","p95":"49561521.447999954"}},"outboundBitsRate":{"values":[[1673247564,"84282965.52"]],"analysis":{"avg":"87557861.44","max":"290402258","min":"45337684.48","p95":"121041718.81199999"}},"internalBitsRate":{"values":[[1673247564,"9125.12"]],"analysis":{"avg":"278114.32","max":"2215460.48","min":"0","p95":"923494.5719999998"}},"throughBitsRate":{"values":[[1673247564,"694420.48"]],"analysis":{"avg":"5619235.12","max":"42455480.24","min":"262607.76","p95":"13559588.195999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0.01","max":"0.08","min":"0.00","p95":"0.08"}}},{"type":"packets","totalPacketsRate":{"values":[[1673247564,"12077.53"]],"analysis":{"avg":"14062.37","max":"32840.42","min":"6564.17","p95":"20923.167999999987"}},"inboundPacketsRate":{"values":[[1673247564,"3865.58"]],"analysis":{"avg":"4241.61","max":"15460.03","min":"1918.22","p95":"8549.799999999997"}},"outboundPacketsRate":{"values":[[1673247564,"8118.89"]],"analysis":{"avg":"9170.98","max":"27134.58","min":"4510.25","p95":"13690.540999999996"}},"internalPacketsRate":{"values":[[1673247564,"15.89"]],"analysis":{"avg":"35.95","max":"276.47","min":"0.00","p95":"122.49749999999999"}},"throughPacketsRate":{"values":[[1673247564,"77.17"]],"analysis":{"avg":"613.82","max":"3768.56","min":"42.92","p95":"1279.757499999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0","max":"0.01","min":"0.00","p95":"0.01"}}},{"type":"sessions","totalSessionsRate":{"values":[[1673247564,"29.92"]],"analysis":{"avg":"29.89","max":"29.92","min":"29.67","p95":"29.92"}}}]},"msg":"OK"}
-}
 const timeFilter = {
  dateRangeValue: -1,
  startTime: 1673244000000,
  endTime: 1673247600000
 }
-const chart = {"id":1,"name":"network overview line","i18n":"","panelId":1,"pid":0,"type":102,"x":0,"y":0,"w":19,"h":6,"params":{},"cby":1,"ctime":"2022-07-06 16:59:22","uby":1,"utime":"2022-07-06 16:59:22","remark":"","state":1,"system":0,"buildIn":0,"uuser":{"id":1,"name":null,"username":"admin","salt":null,"lang":null,"theme":null,"lastLoginIp":null,"lastLoginTime":null,"ctime":null,"cby":null,"email":null,"mobile":null,"status":null,"source":null,"buildIn":null,"roleIds":null,"usergroupIds":null,"roles":null,"apiKeyId":null},"cuser":{"id":1,"name":null,"username":"admin","salt":null,"lang":null,"theme":null,"lastLoginIp":null,"lastLoginTime":null,"ctime":null,"cby":null,"email":null,"mobile":null,"status":null,"source":null,"buildIn":null,"roleIds":null,"usergroupIds":null,"roles":null,"apiKeyId":null},"children":[],"parent":null,"panel":{"id":1,"name":"Network Overview","i18n":null,"type":null,"params":null,"cby":null,"ctime":null,"uby":null,"utime":null,"remark":null,"state":null,"buildIn":null,"uuser":null,"cuser":null},"i":1,"category":"echarts","firstShow":false,"moved":false}
+const chart = {"id":1,"name":"network overview line","i18n":"","panelId":1,"pid":0,"type":102,"x":0,"y":0,"w":19,"h":6,"children":[],"panel":{"id":1,"name":"Network Overview"},"i":1,"category":"echarts","firstShow":false,"moved":false}
+
+function init () {
+  require('vue-router').useRoute.mockReturnValue({ query: {} })
+}

 describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', () => {
+  test('Metric=Bits/s，无数据（空数组）', async () => {
+    init()
+    axios.get.mockResolvedValue(mockData.empty)
+    const wrapper = mount(NetworkOverviewLine, {
+      propsData: {
+        timeFilter,
+        chart
+      }
+    })
+    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
+    await new Promise(resolve => setTimeout(async () => {
+      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
+      const textNode1 = await wrapper.get('[test-id="tabContent1"]')
+      const textNode2 = await wrapper.get('[test-id="tabContent2"]')
+      const textNode3 = await wrapper.get('[test-id="tabContent3"]')
+      const textNode4 = await wrapper.get('[test-id="tabContent4"]')
+      const textNode5 = await wrapper.get('[test-id="tabContent5"]')
+      expect(textNode0.text()).toEqual('-')
+      expect(textNode1.text()).toEqual('-')
+      expect(textNode2.text()).toEqual('-')
+      expect(textNode3.text()).toEqual('-')
+      expect(textNode4.text()).toEqual('-')
+      expect(textNode5.text()).toEqual('-')
+      resolve()
+    }, 200))
+  })
+  test('Metric=Bits/s，0和大数值', async () => {
+    init()
+    axios.get.mockResolvedValue(mockData.bytes.boundary)
+    const wrapper = mount(NetworkOverviewLine, {
+      propsData: {
+        timeFilter,
+        chart
+      }
+    })
+    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
+    await new Promise(resolve => setTimeout(async () => {
+      // total页签固定显示，数据是0也一样
+      const titleNode0 = await wrapper.get('[test-id="tabTitle0"]')
+      const titleNode1 = await wrapper.get('[test-id="tabTitle2"]')
+      const titleNode2 = await wrapper.get('[test-id="tabTitle5"]')
+      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
+      const textNode1 = await wrapper.get('[test-id="tabContent2"]')
+      const textNode2 = await wrapper.get('[test-id="tabContent5"]')
+      expect(titleNode0.text()).toEqual('network.total')
+      expect(titleNode1.text()).toEqual('network.outbound')
+      expect(titleNode2.text()).toEqual('network.other')
+      expect(textNode0.text()).toEqual('0bps')
+      expect(textNode1.text()).toEqual('95.23Ebps')
+      expect(textNode2.text()).toEqual('0.01bps')
+      resolve()
+    }, 200))
+  })
  test('Metric=Bits/s，点击第三个tab', async () => {
-    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    init()
    // 模拟axios返回数据
-    axios.get.mockResolvedValue(mockGet)
+    axios.get.mockResolvedValue(mockData.common)
    // 加载vue组件，获得实例
    const wrapper = mount(NetworkOverviewLine, {
      propsData: {
@@ -24,11 +79,12 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
        chart
      }
    })
-    const textNode0 = await wrapper.get('[test-id="tabContent0"]')
-    const textNode1 = await wrapper.get('[test-id="tabContent1"]')
-    const textNode2 = await wrapper.get('[test-id="tabContent2"]')
+
    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
-    await new Promise(resolve => setTimeout(() => {
+    await new Promise(resolve => setTimeout(async () => {
+      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
+      const textNode1 = await wrapper.get('[test-id="tabContent1"]')
+      const textNode2 = await wrapper.get('[test-id="tabContent2"]')
      expect(textNode0.text()).toEqual('112.04Mbps')
      expect(textNode1.text()).toEqual('18.59Mbps')
      expect(textNode2.text()).toEqual('87.56Mbps')
@@ -41,9 +97,9 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
    expect(textNode3.classes()).toContain('is-active')
  })
  test('Metric=Packets/s', async () => {
-    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    init()
    // 模拟axios返回数据
-    axios.get.mockResolvedValue(mockGet)
+    axios.get.mockResolvedValue(mockData.common)
    // 加载vue组件，获得实例
    const wrapper = mount(NetworkOverviewLine, {
      propsData: {
@@ -52,10 +108,11 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
        metric: 'Packets/s'
      }
    })
-    const textNode0 = await wrapper.get('[test-id="tabContent0"]')
-    const textNode1 = await wrapper.get('[test-id="tabContent1"]')
-    const textNode2 = await wrapper.get('[test-id="tabContent2"]')
-    await new Promise(resolve => setTimeout(() => {
+
+    await new Promise(resolve => setTimeout(async () => {
+      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
+      const textNode1 = await wrapper.get('[test-id="tabContent1"]')
+      const textNode2 = await wrapper.get('[test-id="tabContent2"]')
      expect(textNode0.text()).toEqual('14.06Kpackets/s')
      expect(textNode1.text()).toEqual('4.24Kpackets/s')
      expect(textNode2.text()).toEqual('9.17Kpackets/s')
@@ -63,9 +120,9 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
    }, 200))
  })
  test('Metric=Sessions/s', async () => {
-    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    init()
    // 模拟axios返回数据
-    axios.get.mockResolvedValue(mockGet)
+    axios.get.mockResolvedValue(mockData.common)
    // 加载vue组件，获得实例
    const wrapper = mount(NetworkOverviewLine, {
      propsData: {
@@ -74,8 +131,9 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
        metric: 'Sessions/s'
      }
    })
-    const textNode0 = await wrapper.get('[test-id="tabContent0"]')
-    await new Promise(resolve => setTimeout(() => {
+
+    await new Promise(resolve => setTimeout(async () => {
+      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
      expect(textNode0.text()).toEqual('29.89sessions/s')
      resolve()
    }, 200))
--- a/test/views/charts2/charts/networkOverview/NetworkOverviewLineMockData.js
+++ b/test/views/charts2/charts/networkOverview/NetworkOverviewLineMockData.js
@@ -0,0 +1,73 @@
+const mockData = {
+  // 空
+  empty: {
+    data: {
+      "status": 200,
+      "code": 200,
+      "data": {
+        "resultType": "object",
+        "result" : []
+      }
+    }
+  },
+  bytes: {
+    // 边界
+    boundary: {
+      data: {
+        "status": 200,
+        "code": 200,
+        "data": {
+          "resultType": "object",
+          "result": [
+            {
+              "type": "bytes",
+              "totalBitsRate": {
+                "analysis": {
+                  "avg": "0"
+                }
+              },
+              "inboundBitsRate": {
+                "analysis": {
+                  "avg": "0"
+                }
+              },
+              "outboundBitsRate": {
+                "analysis": {
+                  "avg": "95229000000000000000"
+                }
+              },
+              "internalBitsRate": {
+                "analysis": {
+                  "avg": "0"
+                }
+              },
+              "throughBitsRate": {
+                "analysis": {
+                  "avg": "0"
+                }
+              },
+              "other": {
+                "analysis": {
+                  "avg": "0.01"
+                }
+              }
+            },
+            {
+              "type": "packets"
+            },
+            {
+              "type": "sessions"
+            }
+          ]
+        },
+        "msg": "OK"
+      }
+    }
+  },
+  // 正常数据
+  common: {
+    data: {"status":200,"code":200,"data":{"resultType":"object","result":[{"type":"bytes","totalBitsRate":{"values":[[1673247564,"96801019.52"]],"analysis":{"avg":"112042808.24","max":"301842105.76","min":"52096324","p95":"168089003.35199997"}},"inboundBitsRate":{"values":[[1673247564,"11814508.48"]],"analysis":{"avg":"18587597.36","max":"137528138.88","min":"3181142.88","p95":"49561521.447999954"}},"outboundBitsRate":{"values":[[1673247564,"84282965.52"]],"analysis":{"avg":"87557861.44","max":"290402258","min":"45337684.48","p95":"121041718.81199999"}},"internalBitsRate":{"values":[[1673247564,"9125.12"]],"analysis":{"avg":"278114.32","max":"2215460.48","min":"0","p95":"923494.5719999998"}},"throughBitsRate":{"values":[[1673247564,"694420.48"]],"analysis":{"avg":"5619235.12","max":"42455480.24","min":"262607.76","p95":"13559588.195999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0.01","max":"0.08","min":"0.00","p95":"0.08"}}},{"type":"packets","totalPacketsRate":{"values":[[1673247564,"12077.53"]],"analysis":{"avg":"14062.37","max":"32840.42","min":"6564.17","p95":"20923.167999999987"}},"inboundPacketsRate":{"values":[[1673247564,"3865.58"]],"analysis":{"avg":"4241.61","max":"15460.03","min":"1918.22","p95":"8549.799999999997"}},"outboundPacketsRate":{"values":[[1673247564,"8118.89"]],"analysis":{"avg":"9170.98","max":"27134.58","min":"4510.25","p95":"13690.540999999996"}},"internalPacketsRate":{"values":[[1673247564,"15.89"]],"analysis":{"avg":"35.95","max":"276.47","min":"0.00","p95":"122.49749999999999"}},"throughPacketsRate":{"values":[[1673247564,"77.17"]],"analysis":{"avg":"613.82","max":"3768.56","min":"42.92","p95":"1279.757499999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0","max":"0.01","min":"0.00","p95":"0.01"}}},{"type":"sessions","totalSessionsRate":{"values":[[1673247564,"29.92"]],"analysis":{"avg":"29.89","max":"29.92","min":"29.67","p95":"29.92"}}}]},"msg":"OK"}
+  }
+}
+
+export default mockData
--- a/test/views/charts2/charts/npm/NpmAppCategoryScore.test.js
+++ b/test/views/charts2/charts/npm/NpmAppCategoryScore.test.js
--- a/test/views/charts2/charts/npm/NpmAppEventTable.test.js
+++ b/test/views/charts2/charts/npm/NpmAppEventTable.test.js
@@ -0,0 +1,258 @@
+import NpmAppEventTable from '@/views/charts2/charts/npm/NpmAppEventTable'
+import { mount } from '@vue/test-utils'
+import axios from 'axios'
+import ElementPlus from 'element-plus'
+
+const timeFilter = {
+  dateRangeValue: -1,
+  startTime: 1675558657,
+  endTime: 1675731457
+}
+
+const mockGet = { data: { status: 200, code: 200, queryKey: '88eeb92e0ddb40c0327db494cfe5c74c', success: true, message: null, statistics: { elapsed: 0, rows_read: 2, result_size: 752, result_rows: 10 }, job: null, formatType: 'json', meta: [{ name: 'app_name', type: 'string', category: 'Dimension' }, { name: 'event_severity', type: 'string', category: 'Dimension' }, { name: 'event_type', type: 'string', category: 'Dimension' }, { name: 'count', type: 'long', category: 'Metric' }], data: { resultType: 'table', result: [{ appName: 'youku', eventSeverity: 'info', eventType: 'http error', count: 6 }, { appName: 'uplive', eventSeverity: 'critical', eventType: 'http error', count: 5 }, { appName: 'youku', eventSeverity: 'low', eventType: 'http error', count: 4 }, { appName: 'apple_hls', eventSeverity: 'info', eventType: 'http error', count: 3 }, { appName: 'apple_hls', eventSeverity: 'low', eventType: 'http error', count: 3 }, { appName: 'apple_hls', eventSeverity: 'medium', eventType: 'http error', count: 2 }, { appName: 'uplive', eventSeverity: 'high', eventType: 'http error', count: 2 }, { appName: 'windows_update', eventSeverity: 'medium', eventType: 'http error', count: 2 }, { appName: 'apple_hls', eventSeverity: 'critical', eventType: 'http error', count: 1 }, { appName: 'cloudflare', eventSeverity: 'info', eventType: 'http error', count: 1 }] }, originalUrl: 'http://192.168.44.55:9999?query=SELECT%20app_name%20AS%20app_name%2C%20event_severity%20AS%20event_severity%2C%20event_type%20AS%20event_type%2C%20COUNT%28*%29%20AS%20count%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675580110%20AND%20end_time%20%3C%201675752910%20AND%20entity_type%20%3D%20%27app%27%20GROUP%20BY%20app_name%2Cevent_severity%2Cevent_type%20ORDER%20BY%20count%20DESC%20%20LIMIT%2010%20&format=json&option=real-time', msg: 'OK' } }
+
+describe('views/charts2/charts/npm/NpmAppEventTable.vue测试', () => {
+  test('Npm 事件：APP事件信息表格 严重程度色块验证', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      // critical
+      const criticalArray = [1, 8]
+      for (let index = 0; index < criticalArray.length; index++) {
+        const rowIndex = criticalArray[index]
+        for (let i = 1; i <= 5; i++) {
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue' + rowIndex + i + '"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+      }
+
+      // high
+      const highArray = [6]
+      for (let index = 0; index < highArray.length; index++) {
+        const rowIndex = highArray[index]
+        for (let i = 1; i <= 4; i++) {
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue' + rowIndex + i + '"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+        for (let i = 5; i <= 5; i++) {
+          const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue' + rowIndex + i + '"]')
+          expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
+        }
+      }
+
+      // medium
+      const mediumArray = [5, 7]
+      for (let index = 0; index < mediumArray.length; index++) {
+        const rowIndex = mediumArray[index]
+        for (let i = 1; i <= 3; i++) {
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue' + rowIndex + i + '"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+        for (let i = 4; i <= 5; i++) {
+          const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue' + rowIndex + i + '"]')
+          expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
+        }
+      }
+
+      // low
+      const lowArray = [2, 4]
+      for (let index = 0; index < lowArray.length; index++) {
+        const rowIndex = lowArray[index]
+        for (let i = 1; i <= 2; i++) {
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue' + rowIndex + i + '"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+        for (let i = 3; i <= 5; i++) {
+          const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue' + rowIndex + i + '"]')
+          expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
+        }
+      }
+
+      // info
+      const infoArray = [0, 3, 9]
+      for (let index = 0; index < infoArray.length; index++) {
+        const rowIndex = infoArray[index]
+        for (let i = 1; i <= 1; i++) {
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue' + rowIndex + i + '"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+        for (let i = 2; i <= 5; i++) {
+          const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue' + rowIndex + i + '"]')
+          expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
+        }
+      }
+      resolve()
+    }, 200))
+  })
+  test('Npm 事件：APP事件信息表格 数据验证(应用数据列)', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      const textNode0 = wrapper.find('[test-id="appName0"]')
+      const textNode1 = wrapper.find('[test-id="appName1"]')
+      const textNode2 = wrapper.find('[test-id="appName2"]')
+      const textNode3 = wrapper.find('[test-id="appName3"]')
+      const textNode4 = wrapper.find('[test-id="appName4"]')
+      const textNode5 = wrapper.find('[test-id="appName5"]')
+      const textNode6 = wrapper.find('[test-id="appName6"]')
+      const textNode7 = wrapper.find('[test-id="appName7"]')
+      const textNode8 = wrapper.find('[test-id="appName8"]')
+      const textNode9 = wrapper.find('[test-id="appName9"]')
+
+      expect(textNode0.text()).toEqual('youku')
+      expect(textNode1.text()).toEqual('uplive')
+      expect(textNode2.text()).toEqual('youku')
+      expect(textNode3.text()).toEqual('apple_hls')
+      expect(textNode4.text()).toEqual('apple_hls')
+      expect(textNode5.text()).toEqual('apple_hls')
+      expect(textNode6.text()).toEqual('uplive')
+      expect(textNode7.text()).toEqual('windows_update')
+      expect(textNode8.text()).toEqual('apple_hls')
+      expect(textNode9.text()).toEqual('cloudflare')
+
+      resolve()
+    }, 200))
+  })
+  test('Npm 事件：APP事件信息表格 数据验证(严重程度数据列)', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      const textNode0 = wrapper.find('[test-id="eventSeverity0"]')
+      const textNode1 = wrapper.find('[test-id="eventSeverity1"]')
+      const textNode2 = wrapper.find('[test-id="eventSeverity2"]')
+      const textNode3 = wrapper.find('[test-id="eventSeverity3"]')
+      const textNode4 = wrapper.find('[test-id="eventSeverity4"]')
+      const textNode5 = wrapper.find('[test-id="eventSeverity5"]')
+      const textNode6 = wrapper.find('[test-id="eventSeverity6"]')
+      const textNode7 = wrapper.find('[test-id="eventSeverity7"]')
+      const textNode8 = wrapper.find('[test-id="eventSeverity8"]')
+      const textNode9 = wrapper.find('[test-id="eventSeverity9"]')
+
+      expect(textNode0.text()).toEqual('info')
+      expect(textNode1.text()).toEqual('critical')
+      expect(textNode2.text()).toEqual('low')
+      expect(textNode3.text()).toEqual('info')
+      expect(textNode4.text()).toEqual('low')
+      expect(textNode5.text()).toEqual('medium')
+      expect(textNode6.text()).toEqual('high')
+      expect(textNode7.text()).toEqual('medium')
+      expect(textNode8.text()).toEqual('critical')
+      expect(textNode9.text()).toEqual('info')
+
+      resolve()
+    }, 200))
+  })
+  test('Npm 事件：APP事件信息表格 数据验证(事件类型数据列)', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      const textNode0 = wrapper.find('[test-id="eventType0"]')
+      const textNode1 = wrapper.find('[test-id="eventType1"]')
+      const textNode2 = wrapper.find('[test-id="eventType2"]')
+      const textNode3 = wrapper.find('[test-id="eventType3"]')
+      const textNode4 = wrapper.find('[test-id="eventType4"]')
+      const textNode5 = wrapper.find('[test-id="eventType5"]')
+      const textNode6 = wrapper.find('[test-id="eventType6"]')
+      const textNode7 = wrapper.find('[test-id="eventType7"]')
+      const textNode8 = wrapper.find('[test-id="eventType8"]')
+      const textNode9 = wrapper.find('[test-id="eventType9"]')
+
+      expect(textNode0.text()).toEqual('http error')
+      expect(textNode1.text()).toEqual('http error')
+      expect(textNode2.text()).toEqual('http error')
+      expect(textNode3.text()).toEqual('http error')
+      expect(textNode4.text()).toEqual('http error')
+      expect(textNode5.text()).toEqual('http error')
+      expect(textNode6.text()).toEqual('http error')
+      expect(textNode7.text()).toEqual('http error')
+      expect(textNode8.text()).toEqual('http error')
+      expect(textNode9.text()).toEqual('http error')
+
+      resolve()
+    }, 200))
+  })
+  test('Npm 事件：APP事件信息表格 数据验证(事件数量数据列)', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      const textNode0 = wrapper.find('[test-id="count0"]')
+      const textNode1 = wrapper.find('[test-id="count1"]')
+      const textNode2 = wrapper.find('[test-id="count2"]')
+      const textNode3 = wrapper.find('[test-id="count3"]')
+      const textNode4 = wrapper.find('[test-id="count4"]')
+      const textNode5 = wrapper.find('[test-id="count5"]')
+      const textNode6 = wrapper.find('[test-id="count6"]')
+      const textNode7 = wrapper.find('[test-id="count7"]')
+      const textNode8 = wrapper.find('[test-id="count8"]')
+      const textNode9 = wrapper.find('[test-id="count9"]')
+
+      expect(textNode0.text()).toEqual('6')
+      expect(textNode1.text()).toEqual('5')
+      expect(textNode2.text()).toEqual('4')
+      expect(textNode3.text()).toEqual('3')
+      expect(textNode4.text()).toEqual('3')
+      expect(textNode5.text()).toEqual('2')
+      expect(textNode6.text()).toEqual('2')
+      expect(textNode7.text()).toEqual('2')
+      expect(textNode8.text()).toEqual('1')
+      expect(textNode9.text()).toEqual('1')
+
+      resolve()
+    }, 200))
+  })
+})
--- a/test/views/charts2/charts/npm/NpmEventsByType.test.js
+++ b/test/views/charts2/charts/npm/NpmEventsByType.test.js
--- a/test/views/charts2/charts/npm/NpmEventsHeader.test.js
+++ b/test/views/charts2/charts/npm/NpmEventsHeader.test.js
@@ -4,7 +4,7 @@ import axios from 'axios'

 // 模拟数据
 const chartData = {
-  data: {"status":200,"code":200,"queryKey":"6480498979f7501d822572ebeb9e9665","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":3,"result_size":167,"result_rows":5},"job":null,"formatType":"json","meta":[{"name":"event_severity","type":"string","category":"Dimension"},{"name":"count","type":"long","category":"Metric"}],"data":{"resultType":"table","result":[{"eventSeverity":"critical","count":322334},{"eventSeverity":"high","count":1111},{"eventSeverity":"info","count":122222},{"eventSeverity":"low","count":14456678},{"eventSeverity":"medium","count":2000000}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_severity%20AS%20event_severity%2C%20COUNT%28*%29%20AS%20count%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675026686%20AND%20end_time%20%3C%201675048286%20GROUP%20BY%20event_severity&format=json&option=real-time","msg":"OK"}
+  data: { status: 200, code: 200, queryKey: '6480498979f7501d822572ebeb9e9665', success: true, message: null, statistics: { elapsed: 0, rows_read: 3, result_size: 167, result_rows: 5 }, job: null, formatType: 'json', meta: [{ name: 'event_severity', type: 'string', category: 'Dimension' }, { name: 'count', type: 'long', category: 'Metric' }], data: { resultType: 'table', result: [{ eventSeverity: 'critical', count: 322334 }, { eventSeverity: 'high', count: 1111 }, { eventSeverity: 'info', count: 122222 }, { eventSeverity: 'low', count: 14456678 }, { eventSeverity: 'medium', count: 2000000 }] }, originalUrl: 'http://192.168.44.55:9999?query=SELECT%20event_severity%20AS%20event_severity%2C%20COUNT%28*%29%20AS%20count%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675026686%20AND%20end_time%20%3C%201675048286%20GROUP%20BY%20event_severity&format=json&option=real-time', msg: 'OK' }
 }
 // type
 const type = 'severity'
--- a/test/views/charts2/charts/npm/NpmNetworkQuantity.test.js
+++ b/test/views/charts2/charts/npm/NpmNetworkQuantity.test.js
--- a/test/views/charts2/charts/npm/NpmRecentEvents.test.js
+++ b/test/views/charts2/charts/npm/NpmRecentEvents.test.js
@@ -4,28 +4,28 @@ import axios from 'axios'
 import ElementPlus from 'element-plus'
 // 未下钻
 const mockGet = {
-  data: {"status":200,"code":200,"queryKey":"68d8aa5867b08b926b5bd38c36add9e5","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":550,"result_rows":5},"job":null,"formatType":"json","meta":[{"name":"event_id","type":"long","category":"Metric"},{"name":"event_severity","type":"string","category":"Metric"},{"name":"event_key","type":"string","category":"Metric"},{"name":"event_type","type":"string","category":"Metric"}],"data":{"resultType":"table","result":[{"eventId":1173511643475208192,"eventSeverity":"critical","eventKey":"114.114.114.114 dns error","eventType":"dns error"},{"eventId":1173504415263352832,"eventSeverity":"high","eventKey":"116.178.78.241 http error","eventType":"http error"},{"eventId":1173492761289025537,"eventSeverity":"medium","eventKey":"223.6.6.6 dns error","eventType":"dns error"},{"eventId":1173489002890651648,"eventSeverity":"low","eventKey":"114.114.114.114 dns error","eventType":"dns error"},{"eventId":1173482380537620480,"eventSeverity":"info","eventKey":"1.1.1.2 dns error","eventType":"http error"},{"eventId":1173482380537620481,"eventSeverity":"critical","eventKey":"1.1.1.2 dns error","eventType":"dns error"}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_key%20AS%20event_key%2C%20event_type%20AS%20event_type%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675227528%20AND%20end_time%20%3C%201675231128%20ORDER%20BY%20start_time%20DESC%20%20LIMIT%208%20&format=json&option=real-time","msg":"OK"}
+  data: { status: 200, code: 200, queryKey: '68d8aa5867b08b926b5bd38c36add9e5', success: true, message: null, statistics: { elapsed: 0, rows_read: 2, result_size: 550, result_rows: 5 }, job: null, formatType: 'json', meta: [{ name: 'event_id', type: 'long', category: 'Metric' }, { name: 'event_severity', type: 'string', category: 'Metric' }, { name: 'event_key', type: 'string', category: 'Metric' }, { name: 'event_type', type: 'string', category: 'Metric' }], data: { resultType: 'table', result: [{ eventId: 1173511643475208200, eventSeverity: 'critical', eventKey: '114.114.114.114 dns error', eventType: 'dns error' }, { eventId: 1173504415263352800, eventSeverity: 'high', eventKey: '116.178.78.241 http error', eventType: 'http error' }, { eventId: 1173492761289025500, eventSeverity: 'medium', eventKey: '223.6.6.6 dns error', eventType: 'dns error' }, { eventId: 1173489002890651600, eventSeverity: 'low', eventKey: '114.114.114.114 dns error', eventType: 'dns error' }, { eventId: 1173482380537620500, eventSeverity: 'info', eventKey: '1.1.1.2 dns error', eventType: 'http error' }, { eventId: 1173482380537620500, eventSeverity: 'critical', eventKey: '1.1.1.2 dns error', eventType: 'dns error' }] }, originalUrl: 'http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_key%20AS%20event_key%2C%20event_type%20AS%20event_type%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675227528%20AND%20end_time%20%3C%201675231128%20ORDER%20BY%20start_time%20DESC%20%20LIMIT%208%20&format=json&option=real-time', msg: 'OK' }
 }

 // 下钻
 const mockGet1 = {
-  data: {"status":200,"code":200,"queryKey":"fc0bd92bf3b48a37310d5c004d8b7a7b","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":689,"result_rows":7},"job":null,"formatType":"json","meta":[{"name":"event_id","type":"long","category":"Metric"},{"name":"event_severity","type":"string","category":"Metric"},{"name":"event_type","type":"string","category":"Metric"},{"name":"start_time","type":"long","category":"Metric"}],"data":{"resultType":"table","result":[{"eventId":1132790825086844928,"eventSeverity":"critical","eventType":"http error","startTime":1672802700},{"eventId":1132132403379142657,"eventSeverity":"high","eventType":"dns error","startTime":1672763400},{"eventId":1131441760155688960,"eventSeverity":"low","eventType":"dns error","startTime":1672722300},{"eventId":1131411523384598528,"eventSeverity":"medium","eventType":"http error","startTime":1672720500},{"eventId":1131390214323789824,"eventSeverity":"info","eventType":"dns error","startTime":1672719300},{"eventId":1131306200132968450,"eventSeverity":"critical","eventType":"http error","startTime":1672714200}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_type%20AS%20event_type%2C%20start_time%20AS%20start_time%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201672675200%20AND%20start_time%20%3C%201677513600%20AND%20server_ip%20%3D%20%27116.178.236.216%27%20ORDER%20BY%20start_time%20DESC&format=json&option=real-time","msg":"OK"}
+  data: { status: 200, code: 200, queryKey: 'fc0bd92bf3b48a37310d5c004d8b7a7b', success: true, message: null, statistics: { elapsed: 0, rows_read: 2, result_size: 689, result_rows: 7 }, job: null, formatType: 'json', meta: [{ name: 'event_id', type: 'long', category: 'Metric' }, { name: 'event_severity', type: 'string', category: 'Metric' }, { name: 'event_type', type: 'string', category: 'Metric' }, { name: 'start_time', type: 'long', category: 'Metric' }], data: { resultType: 'table', result: [{ eventId: 1132790825086844900, eventSeverity: 'critical', eventType: 'http error', startTime: 1672802700 }, { eventId: 1132132403379142700, eventSeverity: 'high', eventType: 'dns error', startTime: 1672763400 }, { eventId: 1131441760155689000, eventSeverity: 'low', eventType: 'dns error', startTime: 1672722300 }, { eventId: 1131411523384598500, eventSeverity: 'medium', eventType: 'http error', startTime: 1672720500 }, { eventId: 1131390214323789800, eventSeverity: 'info', eventType: 'dns error', startTime: 1672719300 }, { eventId: 1131306200132968400, eventSeverity: 'critical', eventType: 'http error', startTime: 1672714200 }] }, originalUrl: 'http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_type%20AS%20event_type%2C%20start_time%20AS%20start_time%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201672675200%20AND%20start_time%20%3C%201677513600%20AND%20server_ip%20%3D%20%27116.178.236.216%27%20ORDER%20BY%20start_time%20DESC&format=json&option=real-time', msg: 'OK' }
 }

 const query = {
-  curTab: "country",
-  dimensionType: "ip",
-  fourthMenu: "116.178.214.84",
-  fourthPanel: "8",
-  networkOverviewBeforeTab: "ip",
-  panelName: "116.178.214.84",
+  curTab: 'country',
+  dimensionType: 'ip',
+  fourthMenu: '116.178.214.84',
+  fourthPanel: '8',
+  networkOverviewBeforeTab: 'ip',
+  panelName: '116.178.214.84',
  queryCondition: "common_client_ip='116.178.214.84' OR common_server_ip='116.178.214.84'",
-  t: "1675236779453",
-  tabIndex: "1",
-  tabOperationBeforeType: "",
-  tabOperationType: "4",
-  thirdMenu: "network.ips",
-  thirdPanel: "12"
+  t: '1675236779453',
+  tabIndex: '1',
+  tabOperationBeforeType: '',
+  tabOperationType: '4',
+  thirdMenu: 'network.ips',
+  thirdPanel: '12'
 }

 const timeFilter = {
@@ -144,11 +144,11 @@ describe('views/charts2/charts/npm/NpmRecentEvents.vue测试', () => {
      expect(eventType3.text()).toEqual('http error')
      expect(eventType4.text()).toEqual('dns error')

-      const startTime0 = wrapper.get('[test-id="startTime-2023-01-04T11:25:00+08:00-0"]')
-      const startTime1 = wrapper.get('[test-id="startTime-2023-01-04T00:30:00+08:00-1"]')
-      const startTime2 = wrapper.get('[test-id="startTime-2023-01-03T13:05:00+08:00-2"]')
-      const startTime3 = wrapper.get('[test-id="startTime-2023-01-03T12:35:00+08:00-3"]')
-      const startTime4 = wrapper.get('[test-id="startTime-2023-01-03T12:15:00+08:00-4"]')
+      const startTime0 = wrapper.get('[test-id="startTime-0"]')
+      const startTime1 = wrapper.get('[test-id="startTime-1"]')
+      const startTime2 = wrapper.get('[test-id="startTime-2"]')
+      const startTime3 = wrapper.get('[test-id="startTime-3"]')
+      const startTime4 = wrapper.get('[test-id="startTime-4"]')

      expect(startTime0.text()).toEqual('2023-01-04T11:25:00+08:00')
      expect(startTime1.text()).toEqual('2023-01-04T00:30:00+08:00')
Author	SHA1	Message	Date
刘洪洪	12895e3589	fix: 修复npm-event单测id根据时间命名可能会导致报错的问题	2023-02-23 10:51:56 +08:00
刘洪洪	c2f318391b	fix: 修复linkMonitor下一跳网格图排序错乱问题	2023-02-23 10:23:24 +08:00
李金洋	5ccb91ac24	Update .gitlab-ci.yml	2023-02-21 08:07:38 +00:00
李金洋	d4ce688a5f	Update .gitlab-ci.yml	2023-02-21 07:59:43 +00:00
李金洋	88836a1932	Update .gitlab-ci.yml	2023-02-21 07:55:38 +00:00
李金洋	fec08141e5	Update .gitlab-ci.yml	2023-02-21 07:35:45 +00:00
李金洋	28092cc9ab	Update .gitlab-ci.yml	2023-02-21 07:14:28 +00:00
chenjinsong	e009142e7d	fix: 完善NetworkOverviewLine组件测试用例；更改变量名；	2023-02-17 20:50:29 +08:00
刘洪洪	14a24b268a	fix: 去除无效代码	2023-02-17 16:14:38 +08:00
刘洪洪	06de8e2bc9	feat: 优化Link monitor网格图单测的模拟数据	2023-02-17 15:43:03 +08:00
刘洪洪	d788657048	feat: 优化单测模拟数据格式，避免eslint报错提示造成卡顿	2023-02-17 15:28:43 +08:00
lijinyang	524be68781	Update .gitlab-ci.yml	2023-02-14 15:11:42 +08:00
唐浩	0139a542da	Update .gitlab-ci.yml file	2023-02-09 08:05:47 +00:00
@changcode	da607274d8	CN-878 feat: 单测用例--network overview 供应商与应用	2023-02-07 18:10:56 +08:00
唐浩	48426a3955	Update .gitlab-ci.yml file	2023-02-07 09:26:20 +00:00
hyx	e95ca314a6	CN-879 单测用例--npm events 最底下的表格	2023-02-07 17:20:26 +08:00
唐浩	3d18a4b285	Update .gitlab-ci.yml file	2023-02-07 07:04:32 +00:00
刘洪洪	2b67cb4a0b	fix: detection-performanceEvent去除对eventId的格式转换	2023-02-07 10:29:27 +08:00
chenjinsong	eadb1e350d	CN-858 fix: 报告任务时间设置可编辑	2023-02-06 16:19:32 +08:00
陈劲松	46a23d9464	Merge branch 'cherry-pick-84ca05dc' into 'dev' fix: 修复dns仪表盘切换时间不生效的问题 See merge request cyber-narrator/cn-ui!19	2023-02-03 10:00:35 +00:00
chenjinsong	a7e06c6ffa	fix: 修复dns仪表盘切换时间不生效的问题 (cherry picked from commit `84ca05dccc`)	2023-02-03 18:00:30 +08:00
刘洪洪	822e7bd9aa	fix: 去除测试代码	2023-02-03 17:47:55 +08:00
刘洪洪	73952e6811	fix: 完善link流量流向网格图单测用例	2023-02-03 17:41:50 +08:00
@changcode	251e0a2018	CN-877 feat: 单测用例--link下钻折线图	2023-02-03 16:09:32 +08:00
刘洪洪	d04bb5a87e	fix: 去除多余代码	2023-02-03 16:01:18 +08:00
刘洪洪	f6a6ac82bd	CN-876: 单测用例--link流量流向网格图	2023-02-03 16:00:29 +08:00
刘洪洪	bca147a7db	CN-876: 单测用例--link流量流向网格图	2023-02-03 15:57:43 +08:00
陈劲松	afab449f3a	Merge branch 'cherry-pick-ec486fe9' into 'dev' fix: 修复地图资源路径拼写错误的问题 See merge request cyber-narrator/cn-ui!18	2023-02-03 03:09:18 +00:00
chenjinsong	8bf7b85c2e	fix: 修复地图资源路径拼写错误的问题 (cherry picked from commit `ec486fe930`)	2023-02-03 11:09:04 +08:00
@changcode	ab146b5b15	feat: 单测 npm events 类型分类事件	2023-02-03 10:46:06 +08:00
刘洪洪	230e897146	CN-875: 单测用例--link蜂窝图	2023-02-02 18:14:20 +08:00