fix: 图表重复点击tab坍缩问题

fix：优化LinkBlock右侧蜂窝图数据去重

See merge request cyber-narrator/cn-ui!17

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

@@ -113,6 +113,18 @@
       .el-table thead {
         color: $grey;
       }
+      .el-table__empty-text{
+        line-height:20px !important;
+      }
+      .el-table__header th .cell {
+        display:flex;
+        flex-direction:row;
+        justify-content: center;
+        align-items: center;
+      }
+      .el-table__header tr th:nth-of-type(1) .cell {
+        justify-content: start;
+      }
       .score-cell {
         display: flex !important;
         justify-content: center;

src/utils/constants.js

@@ -291,7 +291,8 @@ export const curTabState = {
   fourthPanel: 'fourthPanel',
   networkOverviewBeforeTab: 'networkOverviewBeforeTab',
   tabOperationType: 'tabOperationType',
-  tabOperationBeforeType: 'tabOperationBeforeType'
+  tabOperationBeforeType: 'tabOperationBeforeType',
+  tabIndex: 'tabIndex'
 }
 
 export const scoreUrl = [

src/views/charts2/Panel.vue

@@ -109,7 +109,7 @@ export default {
     //   }
     // }
     timeFilter: {
-      handler (n) {
+      handler () {
         if (this.$route.path === '/panel/networkAppPerformance' && (this.queryCondition || this.networkOverviewBeforeTab)) {
           this.scoreCalculation()
         }
@@ -120,7 +120,7 @@ export default {
     // this.panelName = this.$store.getters.getPanelName
     const pName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
     const curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-    if(this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+    if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
       this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
       this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
       this.$store.commit('setDnsQtypeMapData', this.dnsQtypeMapData)
@@ -200,7 +200,7 @@ export default {
       this.scoreCalculation()
     }
   },
-  setup (props, ctx) {
+  setup (props) {
     // todo 目前在panel页面测试，后续会挪到router里
     const store = useStore()
     const cancelList = store.state.panel.httpCancel
@@ -359,7 +359,7 @@ export default {
       } else {
         condition = this.queryCondition
       }
-      let type = this.dimensionType || this.networkOverviewBeforeTab
+      const type = this.dimensionType || this.networkOverviewBeforeTab
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
@@ -428,6 +428,10 @@ export default {
         routerObj.query = query
       }
     }
+
+    this.emitter.off('reloadChartList')
+    this.$store = null
+    this.emitter = null
   }
 }
 </script>

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

@@ -154,7 +154,7 @@ export default {
   },
   watch: {
     timeFilter: {
-      handler (n) {
+      handler () {
         this.init()
       }
     }
@@ -167,7 +167,8 @@ export default {
     init () {
       this.toggleLoading(true)
       // 链路基本信息
-      let linkInfo = localStorage.getItem(storageKey.linkInfo)
+      let linkInfo = null
+      linkInfo = localStorage.getItem(storageKey.linkInfo)
       linkInfo = JSON.parse(linkInfo)
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
@@ -241,7 +242,7 @@ export default {
               directionArr.push(item.ingressLinkDirection)
             }
           })
-          directionArr = [...new Set(directionArr)]
+          directionArr = Array.from(new Set(directionArr))
 
           const newNextHopData = []
 
@@ -383,6 +384,9 @@ export default {
 
       return newValue
     }
+  },
+  beforeUnmount () {
+    this.unitConvert = null
   }
 }
 </script>

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

@@ -73,63 +73,62 @@ export default {
             }
             return a.egressLinkId - b.egressLinkId
           })
+
           this.isLinkNoData = linkData.length === 0
-          if (this.isLinkNoData) {
+          if (!this.isLinkNoData) {
-            return
+            // 链路流量数据
-          }
+            const linkGridData = []
+            linkData.forEach(d => {
+              const ingressLink = linkInfo.find(l => l.originalLinkId === d.ingressLinkId)
+              const egressLink = linkInfo.find(l => l.originalLinkId === d.egressLinkId)
+              if (ingressLink && egressLink) {
+                const data = linkGridData.find(g => g.linkId === ingressLink.linkId)
 
-          // 链路流量数据
+                // 上行使用情况计算
-          const linkGridData = []
+                const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
-          linkData.forEach(d => {
+                // 下行使用情况计算
-            const ingressLink = linkInfo.find(l => l.originalLinkId === d.ingressLinkId)
+                const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
-            const egressLink = linkInfo.find(l => l.originalLinkId === d.egressLinkId)
+                // 宽带使用超过90%，赋红点
-            if (ingressLink && egressLink) {
-              const data = linkGridData.find(g => g.linkId === ingressLink.linkId)
 
-              // 上行使用情况计算
+                d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
-              const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
+                // 计算npm分数
-              // 下行使用情况计算
+                // 分数低于3分，赋红点
-              const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
+                d.score = this.localComputeScore(d)
-              // 宽带使用超过90%，赋红点
 
-              d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
+                d.scoreLow3 = d.score < 3
-              // 计算npm分数
-              // 分数低于3分，赋红点
-              d.score = this.localComputeScore(d)
 
-              d.scoreLow3 = d.score < 3
+                if (data) {
-
+                  const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
-              if (data) {
+                  if (!existedEgressLink) {
-                const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
+                    data.egress.push({
-                if (!existedEgressLink) {
+                      linkId: egressLink.linkId,
-                  data.egress.push({
+                      egressUsage: egressUsage,
-                    linkId: egressLink.linkId,
+                      ingressUsage: ingressUsage,
-                    egressUsage: egressUsage,
+                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
-                    ingressUsage: ingressUsage,
+                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
-                    popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                      totalBitsRate: d.totalBitsRate,
-                    valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
+                      ...d
-                    totalBitsRate: d.totalBitsRate,
+                    })
-                    ...d
+                  }
+                } else {
+                  linkGridData.push({
+                    linkId: ingressLink.linkId,
+                    egress: [{
+                      linkId: egressLink.linkId,
+                      egressUsage: egressUsage,
+                      ingressUsage: ingressUsage,
+                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
+                      totalBitsRate: d.totalBitsRate,
+                      ...d
+                    }]
                   })
                 }
-              } else {
-                linkGridData.push({
-                  linkId: ingressLink.linkId,
-                  egress: [{
-                    linkId: egressLink.linkId,
-                    egressUsage: egressUsage,
-                    ingressUsage: ingressUsage,
-                    popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
-                    valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
-                    totalBitsRate: d.totalBitsRate,
-                    ...d
-                  }]
-                })
               }
-            }
+            })
-          })
 
-          this.linkGridData = linkGridData
+            this.linkGridData = linkGridData
+          }
         } else {
           this.isLinkNoData = false
           this.isLinkShowError = true
@@ -150,80 +149,78 @@ export default {
           })
 
           this.isNextNoData = nextLinkData.length === 0
-          if (this.isNextNoData) {
+          if (!this.isNextNoData) {
-            return
+            // 链路下一跳数据
-          }
+            const nextGridData = []
 
-          // 链路下一跳数据
+            nextLinkData.forEach(d => {
-          const nextGridData = []
+              const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
+              const egressLink = linkInfo.find(l => l.nextHop === d.egressLinkDirection && l.direction === 'egress')
 
-          nextLinkData.forEach(d => {
+              if (ingressLink && egressLink) {
-            const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
+                const data = nextGridData.find(g => g.linkId === ingressLink.linkId)
-            const egressLink = linkInfo.find(l => l.nextHop === d.egressLinkDirection && l.direction === 'egress')
 
-            if (ingressLink && egressLink) {
+                let egressBanwidth = 0
-              const data = nextGridData.find(g => g.linkId === ingressLink.linkId)
+                let ingressBanwidth = 0
+                linkInfo.forEach((item) => {
+                  if (item.nextHop === d.egressLinkDirection && item.direction === 'egress') {
+                    egressBanwidth += item.bandwidth
+                  }
+                  if (item.nextHop === d.ingressLinkDirection && item.direction === 'ingress') {
+                    ingressBanwidth += item.bandwidth
+                  }
+                })
 
-              let egressBanwidth = 0
+                // 上行使用情况计算
-              let ingressBanwidth = 0
+                const egressUsage = this.computeUsage(d.egressBitsRate, egressBanwidth)
-              linkInfo.forEach((item) => {
+                // 下行使用情况计算
-                if (item.nextHop === d.egressLinkDirection && item.direction === 'egress') {
+                const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
-                  egressBanwidth += item.bandwidth
+                // 宽带使用超过90%，赋红点
-                }
-                if (item.nextHop === d.ingressLinkDirection && item.direction === 'ingress') {
-                  ingressBanwidth += item.bandwidth
-                }
-              })
 
-              // 上行使用情况计算
+                d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
-              const egressUsage = this.computeUsage(d.egressBitsRate, egressBanwidth)
+                // 计算npm分数
-              // 下行使用情况计算
+                // 分数低于3分，赋红点
-              const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
+                d.score = this.localComputeScore(d)
-              // 宽带使用超过90%，赋红点
 
-              d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
+                d.scoreLow3 = d.score < 3
-              // 计算npm分数
-              // 分数低于3分，赋红点
-              d.score = this.localComputeScore(d)
 
-              d.scoreLow3 = d.score < 3
+                if (data) {
-
+                  const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
-              if (data) {
+                  if (!existedEgressLink) {
-                const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
+                    data.egress.push({
-                if (!existedEgressLink) {
+                      linkId: egressLink.linkId,
-                  data.egress.push({
+                      nextHop: egressLink.nextHop,
-                    linkId: egressLink.linkId,
+                      egressUsage: egressUsage,
-                    nextHop: egressLink.nextHop,
+                      ingressUsage: ingressUsage,
-                    egressUsage: egressUsage,
+                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
-                    ingressUsage: ingressUsage,
+                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
-                    popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                      totalBitsRate: d.totalBitsRate,
-                    valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
+                      ...d
-                    totalBitsRate: d.totalBitsRate,
+                    })
-                    ...d
+                  }
+                } else {
+                  nextGridData.push({
+                    linkId: ingressLink.linkId,
+                    nextHop: ingressLink.nextHop,
+                    egress: [{
+                      linkId: egressLink.linkId,
+                      nextHop: ingressLink.nextHop,
+                      egressUsage: egressUsage,
+                      ingressUsage: ingressUsage,
+                      popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                      valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
+                      totalBitsRate: d.totalBitsRate,
+                      ...d
+                    }]
                   })
                 }
-              } else {
-                nextGridData.push({
-                  linkId: ingressLink.linkId,
-                  nextHop: ingressLink.nextHop,
-                  egress: [{
-                    linkId: egressLink.linkId,
-                    nextHop: ingressLink.nextHop,
-                    egressUsage: egressUsage,
-                    ingressUsage: ingressUsage,
-                    popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
-                    valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
-                    totalBitsRate: d.totalBitsRate,
-                    ...d
-                  }]
-                })
               }
-            }
+            })
-          })
 
-          this.nextGridData = nextGridData
+            this.nextGridData = nextGridData
+          }
         } else {
-          this.isLinkNoData = false
+          this.isNextNoData = false
           this.isNextShowError = true
           // todo 此时返回的是msg，后期记得改为message
           this.nextErrorMsg = res[1].msg

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

@@ -375,13 +375,11 @@ export default {
         if (this.myChart) {
           this.myChart.dispose()
         }
-        this.myChart = echarts.init(dom)
       } else {
         dom = document.getElementById('link-traffic-sankey-1')
         if (this.myChart2) {
           this.myChart2.dispose()
         }
-        this.myChart2 = echarts.init(dom)
       }
       this.chartOption = this.$_.cloneDeep(linksTrafficSankeyOption)
       this.chartOption.tooltip.formatter = function (param) {
@@ -413,11 +411,15 @@ export default {
       }
       this.chartOption.series[0].data = data
       this.chartOption.series[0].links = links
-      if (tab === 0) {
+      this.$nextTick(() => {
-        this.myChart.setOption(this.chartOption)
+        if (tab === 0) {
-      } else {
+          this.myChart = echarts.init(dom)
-        this.myChart2.setOption(this.chartOption)
+          this.myChart.setOption(this.chartOption)
-      }
+        } else {
+          this.myChart2 = echarts.init(dom)
+          this.myChart2.setOption(this.chartOption)
+        }
+      })
     },
     resize () {
       if (this.tab === 0) {
@@ -428,6 +430,9 @@ export default {
     }
   },
   mounted () {
+    this.myChart = null
+    this.myChart2 = null
+    this.chartOption = null
     this.timer = setTimeout(() => {
       this.linkTrafficSankeyDataRequest(this.tab)
     }, 100)
@@ -436,6 +441,19 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+    if (this.myChart) {
+      this.myChart.dispose()
+      // 避免不能生效
+      this.myChart = null
+    }
+    if (this.myChart2) {
+      this.myChart2.dispose()
+      this.myChart2 = null
+    }
+    this.chartOption = null
+
+    this.cnLinkInfo = null
+    this.unitConvert = null
   }
 }
 </script>

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

@@ -737,6 +737,8 @@ export default {
     window.removeEventListener('resize', this.resize)
     clearTimeout(this.timerScroll)
     clearTimeout(this.timerSearch)
+    this.myChart = null
+    this.unitConvert = null
   }
 }
 </script>

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

@@ -388,8 +388,9 @@ export default {
       // 此处为验证是否因dom未销毁，导致图表出错，后续可能会改
       let dom = null
       dom = document.getElementById('overviewLineChart')
-      this.myChart = null
+      if (this.myChart) {
-      this.myChart = echarts.init(dom)
+        this.myChart.dispose()
+      }
       this.chartOption = stackedLineChartOption
       const chartOption = this.chartOption.series[0]
       this.chartOption.series = echartsData.map((t, i) => {
@@ -487,52 +488,54 @@ export default {
         return str
       }
       this.showMarkLine = true
-      this.myChart.setOption(this.chartOption)
+      this.$nextTick(() => {
-
+        this.myChart = echarts.init(dom)
-      // 设置参见官网：https://echarts.apache.org/zh/api.html#action.brush.brush
+        this.myChart.setOption(this.chartOption)
-      this.myChart.dispatchAction({
+        // 设置参见官网：https://echarts.apache.org/zh/api.html#action.brush.brush
-        // 刷选模式的开关。使用此 action 可将当前鼠标变为可刷选状态。事实上，点击 toolbox 中的 brush 按钮时，就是通过这个 action，将当前普通鼠标变为刷选器的。
+        this.myChart.dispatchAction({
-        type: 'takeGlobalCursor',
+          // 刷选模式的开关。使用此 action 可将当前鼠标变为可刷选状态。事实上，点击 toolbox 中的 brush 按钮时，就是通过这个 action，将当前普通鼠标变为刷选器的。
-        // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+          type: 'takeGlobalCursor',
-        key: 'brush',
+          // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
-        brushOption: {
+          key: 'brush',
-          // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
+          brushOption: {
-          brushType: 'lineX',
+            // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
-          xAxisIndex: 'all',
+            brushType: 'lineX',
-          // 单击清除选框
+            xAxisIndex: 'all',
-          brushMode: 'single',
+            // 单击清除选框
-          // 选择完毕再返回所选数据
+            brushMode: 'single',
-          throttleType: 'debounce'
+            // 选择完毕再返回所选数据
-        }
+            throttleType: 'debounce'
-      })
-
-      const self = this
-
-      this.myChart.on('brushEnd', function (params) {
-        self.myChart.dispatchAction({
-          type: 'brush',
-          areas: [] // 删除选框
-        })
-        if (!self.mouseDownFlag) {
-          // 避免点击空白区域报错
-          if (params.areas !== undefined && params.areas.length > 0) {
-            self.brushHistory.unshift({
-              startTime: _.cloneDeep(self.timeFilter.startTime) * 1000,
-              endTime: _.cloneDeep(self.timeFilter.endTime) * 1000
-            })
-
-            const rangeObj = {
-              startTime: Math.ceil(params.areas[0].coordRange[0]),
-              endTime: Math.ceil(params.areas[0].coordRange[1])
-            }
-
-            // todo 目前暂定框选最小范围为5分钟，后续可能会变动
-            if (rangeObj.endTime - rangeObj.startTime < 5 * 60 * 1000) {
-              rangeObj.startTime = rangeObj.endTime - 5 * 60 * 1000
-            }
-            _this.$store.commit('setRangeEchartsData', rangeObj)
           }
-        }
+        })
+
+        const self = this
+
+        this.myChart.on('brushEnd', function (params) {
+          self.myChart.dispatchAction({
+            type: 'brush',
+            areas: [] // 删除选框
+          })
+          if (!self.mouseDownFlag) {
+            // 避免点击空白区域报错
+            if (params.areas !== undefined && params.areas.length > 0) {
+              self.brushHistory.unshift({
+                startTime: _.cloneDeep(self.timeFilter.startTime) * 1000,
+                endTime: _.cloneDeep(self.timeFilter.endTime) * 1000
+              })
+
+              const rangeObj = {
+                startTime: Math.ceil(params.areas[0].coordRange[0]),
+                endTime: Math.ceil(params.areas[0].coordRange[1])
+              }
+
+              // todo 目前暂定框选最小范围为5分钟，后续可能会变动
+              if (rangeObj.endTime - rangeObj.startTime < 5 * 60 * 1000) {
+                rangeObj.startTime = rangeObj.endTime - 5 * 60 * 1000
+              }
+              _this.$store.commit('setRangeEchartsData', rangeObj)
+            }
+          }
+        })
       })
     },
     activeChange (item, index) {
@@ -673,6 +676,8 @@ export default {
   mounted () {
     // todo 初始化鼠标事件，开启右键返回
     // this.domInit()
+    this.myChart = null
+    this.chartOption = null
     this.timer = setTimeout(() => {
       if (this.lineTab) {
         const data = this.mpackets.find(t => t.class === this.lineTab)
@@ -688,6 +693,15 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+
+    let myChart = echarts.getInstanceByDom(document.getElementById('overviewLineChart'))
+    if (myChart) {
+      echarts.dispose(myChart)
+    }
+    this.myChart = null
+    // 检测时发现该方法占用较大内存，且未被释放
+    this.unitConvert = null
+    myChart = null
   }
 }
 </script>

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

@@ -193,6 +193,8 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+    this.myChart = null
+    this.myChart2 = null
   }
 }
 </script>

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

@@ -33,7 +33,7 @@
             <template v-for="(item, index) in customTableTitles">
               <el-table-column
                       v-if="item.checked"
-                      :sortable="sortable(item)"
+                      :sortable="item.showError ? false : sortable(item)"
                       align="center"
                       :prop="item.prop"
                       class="data-column"
@@ -42,6 +42,7 @@
               >
                 <template #header >
                   <span class="data-column__span" >{{$t(item.label)}}</span>
+                  <chart-error v-if="item.showError" tooltip :content="item.errorMsg" width="300"  />
                 </template>
                 <template  #default="scope" :column="item">
                   <template v-if="item.columnType === tableColumnType.chainRatio"  >
@@ -123,8 +124,9 @@
                 </template>
               </el-table-column>
             </template>
-            <template v-slot:empty>
+            <template v-slot:empty >
-              <div class="table-no-data" v-if="isNoData">
+              <chart-error v-if="showError" :content="errorMsg"  />
+              <div class="table-no-data" v-else-if="isNoData">
                 <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
               </div>
             </template>
@@ -259,7 +261,9 @@ export default {
       tableSortTab: '',
       urlChangeParams: {},
       showUnit: false,
-      fromRoute: fromRoute
+      fromRoute: fromRoute,
+      showError: false,
+      errorMsg: ''
     }
   },
   props: {
@@ -327,14 +331,20 @@ export default {
       const requestUrl = this.getCurUrl()
       get(requestUrl, queryParams).then(response => {
         if (response.code === 200) {
+          this.showError = false
+          this.errorMsg = ''
           this.chartData = response.data.result
           this.initData()
         } else {
+          this.showError = true
+          this.errorMsg = response.message || 'Unknown'
           this.isNoData = true
           this.toggleLoading(false)
         }
       }).catch(e => {
         console.error(e)
+        this.showError = true
+        this.errorMsg = e.message || 'Unknown'
       }).finally(() => {
         this.changeUrlTabState()
         this.toggleLoading(false)
@@ -636,6 +646,8 @@ export default {
           if (tableColumn.columnType === tableColumnType.chainRatio && tableColumn.isInMainUrl && tableDataTmp && tableDataTmp.length > 0) {
             get(self.gerCycleUrl(), queryParams).then(response => {
               if (response.code === 200) {
+                tableColumn.showError = false
+                tableColumn.errorMsg = ''
                 cycleTotalList = response.data.result
                 tableDataTmp.forEach(item => {
                   const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
@@ -680,9 +692,14 @@ export default {
                   }
                   item[tableColumn.prop] = [(item[tableColumn.prop] || item[tableColumn.prop] === 0) ? item[tableColumn.prop] : '', trend, trendPercent]
                 })
+              }else {
+                tableColumn.showError = true
+                tableColumn.errorMsg = response.message || 'Unknown'
               }
             }).catch(e => {
               console.log(e)
+              tableColumn.showError = true
+              tableColumn.errorMsg = e.message || 'Unknown'
             }).finally(e => {
               this.tableData = tableDataTmp
               this.tableDataBackup = tableDataTmp
@@ -695,6 +712,10 @@ export default {
                 if (tableColumn.columnType === tableColumnType.chainRatio && !tableColumn.isInMainUrl) {
                   get(self.gerColumnUrl(tableColumn), queryParams).then(response => {
                     if (response.code === 200) {
+                      if (!tableColumn.showError) {
+                        tableColumn.showError = false
+                        tableColumn.errorMsg = ''
+                      }
                       const columnList = response.data.result
                       self.tableData.forEach((item, i) => {
                         const data = columnList.find(i => i[curTab.prop] === item.tab)
@@ -709,11 +730,19 @@ export default {
                         }
                         if (Object.keys(item.scoreGroup).length >= 5) {
                           item.score = computeScore(item.scoreGroup)
+                          if(!_.isNumber(item.score)){
+                            item.score = 0
+                          }
                         }
                       })
+                    }else {
+                      tableColumn.showError = true
+                      tableColumn.errorMsg = response.message || 'Unknown'
                     }
                   }).catch(e => {
                     console.log(e)
+                    tableColumn.showError = true
+                    tableColumn.errorMsg = e.message || 'Unknown'
                   }).finally(e => {
                     // 查询需要单独查询的，且需要展示环比图标，列的前一周期的数据
                     if (tableColumn.cycle && self.tableData && self.tableData.length > 0) {
@@ -723,6 +752,10 @@ export default {
                       }
                       get(self.gerColumnUrl(tableColumn), queryCycleParams).then(response => {
                         if (response.code === 200) {
+                          if(!tableColumn.showError){
+                            tableColumn.showError = false
+                            tableColumn.errorMsg = ''
+                          }
                           cycleTotalList = response.data.result
                           self.tableData.forEach(item => {
                             const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
@@ -770,9 +803,14 @@ export default {
                               item[tableColumn.prop] = [(item[tableColumn.prop] || item[tableColumn.prop] === 0) ? item[tableColumn.prop] : '', trend, trendPercent]
                             }
                           })
+                        }else {
+                          tableColumn.showError = true
+                          tableColumn.errorMsg = response.message || 'Unknown'
                         }
                       }).catch(e => {
                         console.log(e)
+                        tableColumn.showError = true
+                        tableColumn.errorMsg = e.message || 'Unknown'
                       })
                     }
                   })
@@ -1113,7 +1151,7 @@ export default {
         4.设置菜单：第三级，第四级名称，并保存到store中
         5.设置panel名称，表格维度类型：如ip，domain等(即查询参数中的type)
     * */
-    handleTabValue (columnName, columnValue) {
+    async handleTabValue (columnName, columnValue) {
       // console.log('NetworkOverview类------handleTabValue：下钻')
       // 下钻前保存当前路由状态
       this.beforeRouterPush()
@@ -1155,7 +1193,7 @@ export default {
         })
       }
 
-      this.saveUserLocalConfig()
+      await this.saveUserLocalConfig()
       let forthMenuName = ''
       if (clickTab.prop === 'qtype') {
         forthMenuName = this.dnsQtypeMapData.get(columnValue)
@@ -1187,6 +1225,14 @@ export default {
           })
         }
       })
+      if (!this.getUrlParam(this.curTabState.tabIndex)) {
+        let thirdMenu = this.urlChangeParams[this.curTabState.thirdMenu]
+        if(thirdMenu === 'network.serverIps'){
+          this.urlChangeParams[this.curTabState.tabIndex] = 1
+        }else  if(thirdMenu === 'network.clientIps' || thirdMenu === 'network.ips'){
+          this.urlChangeParams[this.curTabState.tabIndex] = 0
+        }
+      }
       this.changeUrlTabState()
       this.$router.push({
         path: this.$route.path,
@@ -1767,6 +1813,13 @@ export default {
   },
   async mounted () {
     console.log('mounted start...')
+    this.list = null
+    this.tabList = null
+    this.allList = null
+    this.drillDownTableConfigs = null
+    this.curTable = null
+    this.commonColumnList = null
+
     this.userId = localStorage.getItem(storageKey.userId)
     this.drillDownTableConfigs = await combinDrilldownTableWithUserConfig()
     this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
@@ -1846,10 +1899,14 @@ export default {
         }
       }
     }
-    this.saveUserLocalConfig()
+    await this.saveUserLocalConfig()
     this.getChartData()
   },
   setup (props) {
+  },
+  beforeUnmount () {
+    // 以下元素，检测到内存并未释放
+
   },
   unmounted () {
     this.isNoData = false

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

@@ -154,6 +154,8 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+    this.myChart = null
+    this.chartOption = null
   }
 }
 </script>

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

@@ -99,49 +99,48 @@ export default {
         }
         if (params.type === 'serverIp' || params.type === 'clientIp') params.type = 'ip'
         getData(api.npm.overview.map, params).then(res => {
-          const subParams = {
-            ...params,
-            params: res.map(r => `'${r.country}'`).join(',')
-          }
-
           this.showError = false
-
+          if (res && res.length > 0) {
-          // 计算分数
+            const subParams = {
-          const tcpRequest = get(api.npm.overview.mapTcp, subParams)
+              ...params,
-          const httpRequest = get(api.npm.overview.mapHttp, subParams)
+              params: res.map(r => `'${r.country}'`).join(',')
-          const sslRequest = get(api.npm.overview.mapSsl, subParams)
+            }
-          const tcpLostRequest = get(api.npm.overview.mapPacketLoss, subParams)
+            // 计算分数
-          const packetRetransRequest = get(api.npm.overview.mapPacketRetrans, subParams)
+            const tcpRequest = get(api.npm.overview.mapTcp, subParams)
-          Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
+            const httpRequest = get(api.npm.overview.mapHttp, subParams)
-            const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
+            const sslRequest = get(api.npm.overview.mapSsl, subParams)
-            const mapData = res
+            const tcpLostRequest = get(api.npm.overview.mapPacketLoss, subParams)
-            res2.forEach((r, i) => {
+            const packetRetransRequest = get(api.npm.overview.mapPacketRetrans, subParams)
-              if (r.code === 200) {
+            Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
-                mapData.forEach(t => {
+              const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
-                  const find = r.data.result.find(d => d.country === t.country)
+              const mapData = res
-                  t[keyPre[i] + 'Score'] = find
+              res2.forEach((r, i) => {
-                })
+                if (r.code === 200) {
-              } else {
+                  mapData.forEach(t => {
-                this.showError = true
+                    const find = r.data.result.find(d => d.country === t.country)
-                // todo 目前返回的字段为msg，以后将改为message
+                    t[keyPre[i] + 'Score'] = find
-                this.errorMsg = r.message
+                  })
-              }
+                } else {
+                  this.showError = true
+                  this.errorMsg = r.message
+                }
+              })
+              mapData.forEach(t => {
+                const data = {
+                  establishLatencyMs: t.tcpScore ? t.tcpScore.establishLatencyMs : null,
+                  httpResponseLatency: t.httpScore ? t.httpScore.httpResponseLatency : null,
+                  sslConLatency: t.sslScore ? t.sslScore.sslConLatency : null,
+                  tcpLostlenPercent: t.tcpLostScore ? t.tcpLostScore.tcpLostlenPercent : null,
+                  pktRetransPercent: t.packetRetransScore ? t.packetRetransScore.pktRetransPercent : null
+                }
+                t.score = computeScore(data)
+                if (t.score === '-') {
+                  t.score = ''
+                }
+              })
+              this.loadMarkerData(imageSeries, mapData)
             })
-            mapData.forEach(t => {
+          }
-              const data = {
-                establishLatencyMs: t.tcpScore ? t.tcpScore.establishLatencyMs : null,
-                httpResponseLatency: t.httpScore ? t.httpScore.httpResponseLatency : null,
-                sslConLatency: t.sslScore ? t.sslScore.sslConLatency : null,
-                tcpLostlenPercent: t.tcpLostScore ? t.tcpLostScore.tcpLostlenPercent : null,
-                pktRetransPercent: t.packetRetransScore ? t.packetRetransScore.pktRetransPercent : null
-              }
-              t.score = computeScore(data)
-              if (t.score === '-') {
-                t.score = ''
-              }
-            })
-            this.loadMarkerData(imageSeries, mapData)
-          })
         }).catch(e => {
           this.showError = true
           this.errorMsg = e.message
@@ -155,8 +154,9 @@ export default {
       }
     },
     loadMarkerData (imageSeries, data) {
+      data = data.filter(d => d.score || d.score === 0)
       imageSeries.data = data.map(r => ({
-        score: r.score || '–',
+        score: r.score,
         name: r.province || r.country,
         throughput: valueToRangeValue(r.throughBitsRate, unitTypes.bps).join(' '),
         id: r.serverId,

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

@@ -331,6 +331,7 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+    this.myChart = null
   }
 }
 </script>

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

@@ -26,7 +26,7 @@ export default {
     const { query } = useRoute()
     const queryCondition = ref(query.queryCondition || '')
     const dimensionType = ref(query.dimensionType || '')
-    const tabIndex = ref(query.tabIndex)
+    const tabIndex = ref(query.tabIndex || 0)
     const tabOperationType = ref(query.tabOperationType)
     const networkOverviewBeforeTab = ref(query.networkOverviewBeforeTab || '')
     return {
@@ -50,7 +50,9 @@ export default {
       npmNetworkLastCycleData: [],
       npmNetworkData: [],
       side: '',
-      chartData: {}
+      chartData: {},
+      timer1: null,
+      timer2: null
     }
   },
   watch: {
@@ -179,7 +181,7 @@ export default {
           if (timer) {
             clearTimeout(timer)
           }
-          timer = setTimeout(() => {
+          this.timer1 = setTimeout(() => {
             this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
           }, 300)
         }).catch((e) => {
@@ -188,7 +190,7 @@ export default {
             clearTimeout(timer)
           }
           this.npmNetworkLastCycleData = [e]
-          timer = setTimeout(() => {
+          this.timer2 = setTimeout(() => {
             this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
           }, 300)
         }).finally(() => {
@@ -276,6 +278,10 @@ export default {
       this.chartData = _.cloneDeep(this.chart)
     }
     this.npmNetworkCycleQuery()
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer1)
+    clearTimeout(this.timer2)
   }
 }
 </script>

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

@@ -115,11 +115,15 @@ export default {
           curTabIndex = 0
           if (self.serverSessions === 0) {
             self.disableTab(1)
+          }else if(curTabIndexInUrl !== null){
+            curTabIndex = curTabIndexInUrl
           }
         }else if(thirdMenu === 'network.serverIps'){
           curTabIndex = 1
           if (self.clientSessions === 0) {
             self.disableTab(0)
+          }else if(curTabIndexInUrl !== null){
+            curTabIndex = curTabIndexInUrl
           }
         }else if (self.clientSessions === 0) {
           curTabIndex = 1
@@ -127,21 +131,23 @@ export default {
         } else if (self.serverSessions === 0) {
           curTabIndex = 0
           self.disableTab(1)
+        } else if(curTabIndexInUrl !== null){
+          curTabIndex = curTabIndexInUrl
         }
         this.$nextTick(() => {
-          if(curTabIndexInUrl !== null){
+          self.currentTab = curTabIndex
-            self.currentTab = curTabIndexInUrl
+          self.isCurTabReady = true
-            self.isCurTabReady = true
+          //URL中tabIndex的设置，client初始化时查询条件需要：side条件
-            setTimeout(() => {
+          const { query } = this.$route
-              this.$emit('tabChange', curTabIndexInUrl)
+          const newUrl = urlParamsHandler(window.location.href, query, {
-            }, 400)
+            tabIndex: self.currentTab
-          }else {
+          })
-            self.currentTab = curTabIndex
+          overwriteUrl(newUrl)
-            self.isCurTabReady = true
-          }
           setTimeout(() => {
             self.handleActiveBar(self.currentTab)
-
+          }, 400)
+          setTimeout(() => {
+            this.$emit('tabChange', self.currentTab)
           }, 400)
         })
       })

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

@@ -54,7 +54,7 @@ export default {
     const metricFilter = ref(query.lineMetric || 'Bits/s')
     const queryCondition = ref(query.queryCondition || '')
     const dimensionType = ref(query.dimensionType || '')
-    const tabIndex = ref(query.tabIndex)
+    const tabIndex = ref(query.tabIndex || 0)
     return {
       metricFilter,
       queryCondition,
@@ -666,6 +666,7 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+    this.myChart = null
   }
 }
 </script>