fix: 完善NetworkOverviewLine组件测试用例；更改变量名；

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;
             }

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'
         }
       ]
     }

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()

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[0]"
+     :line-data="tabs[0]"
      :time-filter="timeFilter">
    </link-traffic-drill-down-list>
    <div class="line network link-traffic">
@@ -12,18 +12,18 @@
        <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)"
                 :test-id="`tab-${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" :test-id="`tabContent${index}`">
                <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
@@ -114,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: '' }
@@ -185,7 +185,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: '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: '' }
@@ -258,7 +258,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]
               }
@@ -301,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 {
@@ -322,7 +322,7 @@ export default {
             } else {
               this.lineTab = t.class
             }
-            this.mpackets.forEach((e) => {
+            this.tabs.forEach((e) => {
               this.dispatchLegendSelectAction(e.name)
             })
           }
@@ -330,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;`
       }
@@ -344,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
         }
@@ -393,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) => {
@@ -422,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'
         })
       }
@@ -441,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()

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()

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)
       }
     }
   },