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,11 +73,9 @@ export default {
             }
             return a.egressLinkId - b.egressLinkId
           })
-          this.isLinkNoData = linkData.length === 0
-          if (this.isLinkNoData) {
-            return
-          }
 
+          this.isLinkNoData = linkData.length === 0
+          if (!this.isLinkNoData) {
             // 链路流量数据
             const linkGridData = []
             linkData.forEach(d => {
@@ -130,6 +128,7 @@ export default {
             })
 
             this.linkGridData = linkGridData
+          }
         } else {
           this.isLinkNoData = false
           this.isLinkShowError = true
@@ -150,10 +149,7 @@ export default {
           })
 
           this.isNextNoData = nextLinkData.length === 0
-          if (this.isNextNoData) {
-            return
-          }
-
+          if (!this.isNextNoData) {
             // 链路下一跳数据
             const nextGridData = []
 
@@ -222,8 +218,9 @@ export default {
             })
 
             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
+      this.$nextTick(() => {
         if (tab === 0) {
+          this.myChart = echarts.init(dom)
           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
-      this.myChart = echarts.init(dom)
+      if (this.myChart) {
+        this.myChart.dispose()
+      }
       this.chartOption = stackedLineChartOption
       const chartOption = this.chartOption.series[0]
       this.chartOption.series = echartsData.map((t, i) => {
@@ -487,8 +488,9 @@ export default {
         return str
       }
       this.showMarkLine = true
+      this.$nextTick(() => {
+        this.myChart = echarts.init(dom)
         this.myChart.setOption(this.chartOption)
-
         // 设置参见官网：https://echarts.apache.org/zh/api.html#action.brush.brush
         this.myChart.dispatchAction({
           // 刷选模式的开关。使用此 action 可将当前鼠标变为可刷选状态。事实上，点击 toolbox 中的 brush 按钮时，就是通过这个 action，将当前普通鼠标变为刷选器的。
@@ -534,6 +536,7 @@ export default {
             }
           }
         })
+      })
     },
     activeChange (item, index) {
       if (this.isNoData) return
@@ -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>
-              <div class="table-no-data" v-if="isNoData">
+            <template v-slot:empty >
+              <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,13 +99,12 @@ export default {
         }
         if (params.type === 'serverIp' || params.type === 'clientIp') params.type = 'ip'
         getData(api.npm.overview.map, params).then(res => {
+          this.showError = false
+          if (res && res.length > 0) {
             const subParams = {
               ...params,
               params: res.map(r => `'${r.country}'`).join(',')
             }
-
-          this.showError = false
-
             // 计算分数
             const tcpRequest = get(api.npm.overview.mapTcp, subParams)
             const httpRequest = get(api.npm.overview.mapHttp, subParams)
@@ -123,7 +122,6 @@ export default {
                   })
                 } else {
                   this.showError = true
-                // todo 目前返回的字段为msg，以后将改为message
                   this.errorMsg = r.message
                 }
               })
@@ -142,6 +140,7 @@ export default {
               })
               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 = curTabIndexInUrl
-            self.isCurTabReady = true
-            setTimeout(() => {
-              this.$emit('tabChange', curTabIndexInUrl)
-            }, 400)
-          }else {
           self.currentTab = curTabIndex
           self.isCurTabReady = true
-          }
+          //URL中tabIndex的设置，client初始化时查询条件需要：side条件
+          const { query } = this.$route
+          const newUrl = urlParamsHandler(window.location.href, query, {
+            tabIndex: self.currentTab
+          })
+          overwriteUrl(newUrl)
           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>