CN-700 界面刷新保持状态-下钻table等

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

@@ -124,6 +124,9 @@
     .el-tabs__content {
       height: 100% !important;
     }
+    .el-tabs__header {
+      display:none;
+    }
   }
   .tab-search {
     position:absolute;

src/components/layout/Header.vue

@@ -180,9 +180,10 @@
 <script>
 import { useRoute } from 'vue-router'
 import { get, put } from '@/utils/http'
-import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl } from '@/utils/constants'
+import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, curTabState } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
+import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
 
 export default {
@@ -229,7 +230,8 @@ export default {
           path: '/detection/performanceEvent'
         }
       ],
-      curPageNum: 1
+      curPageNum: 1,
+      curTabState: curTabState
     }
   },
   computed: {
@@ -432,6 +434,13 @@ export default {
         }
       })
     },
+    changeTabState (param, value) {
+      const { query } = this.$route
+      const newQuery = {}
+      newQuery[param] = value
+      const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+      overwriteUrl(newUrl)
+    },
     jump (route, columnName, columnValue, opeType) {
       this.showMenu = false
       if (opeType) {
@@ -465,7 +474,7 @@ export default {
                 this.$store.commit('setPanelName', columnName)
                 const tabList = this.$store.getters.getNetworkOverviewTabList
                 const curTab = tabList.filter(item => this.$t(item.label) === columnName)[0]
-                this.$store.commit('setNetworkOverviewCurrentTab', curTab)
+                this.changeTabState(this.curTabState.curTab, curTab)
                 this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
                 this.$store.commit('setQueryCondition', '')
                 this.$store.commit('setNetworkOverviewBeforeTab', null)
@@ -476,8 +485,8 @@ export default {
                 this.$store.commit('setBreadcrumbColumnName', '')
                 this.$store.commit('setDimensionType', '')
                 this.$store.commit('setPanelName', '')
-                this.$store.commit('setBreadcrumbColumnValueList', [])
+                // this.$store.commit('setBreadcrumbColumnValueList', [])
-                this.$store.commit('setNetworkOverviewCurrentTab', null)
+                this.changeTabState(this.curTabState.curTab, null)
                 this.$store.commit('setQueryCondition', '')
                 this.$store.commit('setNetworkOverviewBeforeTab', null)
               }
@@ -488,11 +497,11 @@ export default {
       // console.log(this.$store.getters.getDimensionType)
       if (opeType === 3) {
         this.$router.push({
-          params: { ...this.$route.params, fourthPanel: '' }
+          query: { ...this.$route.query, fourthPanel: '' }
         })
       } else if (opeType != 4) {
         this.$router.push({
-          params: { ...this.$route.params, fourthPanel: '', thirdPanel: '' }
+          query: { ...this.$route.query, fourthPanel: '', thirdPanel: '' }
         })
       }
       if (route === this.route) {

src/store/modules/panel.js

@@ -25,7 +25,6 @@ const panel = {
             panelName、
             breadcrumbColumnName、
             breadcrumbColumnValue、
-            breadcrumbColumnValueList、
             networkOverviewCurrentTab、
             queryCondition
     点击顶部第二级菜单：与点击菜单相同
@@ -42,8 +41,7 @@ const panel = {
     breadcrumbColumnName: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
     dimensionType: '', // 维度
     breadcrumbColumnValue: '', // 点击tab里的value，都会修改此值,为面包屑的菜单
-    breadcrumbColumnValueList: [], // 第四级面包屑的下拉列表
+    // networkOverviewCurrentTab: null, // 只代表选中的tab，有时会与面包屑中显示的值不同
-    networkOverviewCurrentTab: null, // 只代表选中的tab，有时会与面包屑中显示的值不同
     networkOverviewBeforeTab: null, // 点击表格的值时使用，记录点击当前tab表格的值之前点击的表格值所属的tab
     queryCondition: '', // 数据查询的条件
     networkOverviewTabList: [], // 存储tab列表的一些状态：如是否选中
@@ -114,12 +112,9 @@ const panel = {
     setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
       state.breadcrumbColumnValue = breadcrumbColumnValue
     },
-    setBreadcrumbColumnValueList (state, breadcrumbColumnValueList) {
+    // setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
-      state.breadcrumbColumnValueList = breadcrumbColumnValueList
+    // state.networkOverviewCurrentTab = networkOverviewCurrentTab
-    },
+    // },
-    setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
-      state.networkOverviewCurrentTab = networkOverviewCurrentTab
-    },
     setQueryCondition (state, queryCondition) {
       state.queryCondition = queryCondition
     },
@@ -200,12 +195,9 @@ const panel = {
     getBreadcrumbColumnValue (state) {
       return state.breadcrumbColumnValue
     },
-    getBreadcrumbColumnValueList (state) {
+    // getNetworkOverviewCurrentTab (state) {
-      return state.breadcrumbColumnValueList
+    // return state.networkOverviewCurrentTab
-    },
+    // },
-    getNetworkOverviewCurrentTab (state) {
-      return state.networkOverviewCurrentTab
-    },
     getQueryCondition (state) {
       return state.queryCondition
     },

src/utils/constants.js

@@ -238,6 +238,15 @@ export const cycle = {
   pre: 1
 }
 
+export const curTabState = {
+  curTab: 'curTab',
+  tableMetric: 'tableMetric',
+  tableShowMore: 'tableShowMore',
+  tableSortColumn: 'tableSortColumn',
+  tableSortType: 'tableSortType',
+  tableSortTab: 'tableSortTab'
+}
+
 export const scoreUrl = [
   '/interface/application/performance/overview/drilldown/dimensionTcpSessionDelay',
   '/interface/application/performance/overview/drilldown/dimensionSslConDelay',

src/utils/tools.js

@@ -837,6 +837,15 @@ export function computeScore (data, index) {
   return score * k
 }
 
+// 改变tab状态(url中)：当前tab，
+export function changeTabState (param, value) {
+  const query = router.query
+  query[param] = JSON.stringify(value)
+  router.push({
+    query: query
+  })
+}
+
 // cleanOldParams: true|false，是否清除oldParams
 export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
   let newUrl = url.split('?')[0]

src/views/charts2/Chart.vue

@@ -20,11 +20,10 @@
         :time-filter="timeFilter"
         @toggleLoading="toggleLoading"
     ></network-overview-performance-event>
-    <network-overview-tabs @getChartData="getChartData"
+    <network-overview-tabs
          v-else-if="chart.type === typeMapping.networkOverview.table"
          :time-filter="timeFilter"
          :chart="chart"
-         :chartData="chartData"
          :ref="`tab${chart.id}`"
          @toggleLoading="toggleLoading"
     ></network-overview-tabs>

src/views/charts2/Panel.vue

@@ -148,8 +148,8 @@ export default {
     const panel = ref({})
     let panelType = 1 // 取得panel的type
     const { params, query } = useRoute()
-    const thirdPanel = params.thirdPanel
+    const thirdPanel = query.thirdPanel
-    const fourthPanel = params.fourthPanel
+    const fourthPanel = query.fourthPanel
     if (fourthPanel) {
       panelType = Number(fourthPanel)
     } else if (thirdPanel) {

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

@@ -118,7 +118,7 @@
 
 <script>
 import unitConvert from '@/utils/unit-convert'
-import { storageKey, unitTypes, networkTable, operationType } from '@/utils/constants'
+import { storageKey, unitTypes, networkTable, operationType, curTabState } from '@/utils/constants'
 import * as echarts from 'echarts'
 import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
 import { ref, shallowRef } from 'vue'
@@ -180,7 +180,8 @@ export default {
       offset: 0,
       flag: false,
       timerSearch: null,
-      loadingBody: false
+      loadingBody: false,
+      curTabState: curTabState
     }
   },
   setup () {
@@ -370,16 +371,26 @@ export default {
         const tabObjGroup = list.filter(item => item.checked)
         if (tabObjGroup && tabObjGroup.length > 0) {
           const curTab = tabObjGroup[0]
-          this.$store.commit('setNetworkOverviewCurrentTab', curTab)
+          this.changeTabState(this.curTabState.curTab, curTab)
         }
         this.$router.push({
-          params: {
+          query: {
+            ...this.$route.query,
             thirdPanel: curTable.panelIdOfThirdMenu ? curTable.panelIdOfThirdMenu : '',
             fourthPanel: toPanel || ''
           }
         })
       }
     },
+    changeTabState (param, value) {
+      const query = {
+        ...this.$route.query
+      }
+      query[param] = value
+      this.$router.push({
+        query: query
+      })
+    },
     initChart (obj) {
       let chart = this.myChart.find(m => m.name === obj.name && m.type === obj.type)
       if (!chart) {

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

@@ -107,14 +107,14 @@
 </template>
 
 <script>
-import { unitTypes, npmCategoryInfoMapping, networkTable, operationType, npmCategoryToAppCategoryMap } from '@/utils/constants'
+import { unitTypes, npmCategoryInfoMapping, networkTable, operationType, npmCategoryToAppCategoryMap, curTabState } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
-import { getChainRatio, computeScore } from '@/utils/tools'
+import { getChainRatio, computeScore, changeCurTab } from '@/utils/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
-import ChartNoData from "@/views/charts/charts/ChartNoData";
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
   name: 'NpmAppCategoryScore',
   data () {
@@ -138,7 +138,8 @@ export default {
         { label: 'network.outbound', prop: 'outbound' },
         { label: 'network.inbound', prop: 'inbound' }
       ],
-      isNoData: false
+      isNoData: false,
+      curTabState: curTabState
     }
   },
   components: {
@@ -233,7 +234,8 @@ export default {
       const value = npmCategoryToAppCategoryMap[key]
       const tabType = 'network.applicationCategories'
       const oldCurTab = this.$store.getters.getNetworkOverviewBeforeTab
-      const curTable = networkTable.networkOverview
+      // const curTable = networkTable.networkOverview
+      const curTable = networkTable.networkAppPerformance
       const list = this.$store.getters.getNetworkOverviewTabList
       const tabGroup = list.filter(item => item.label === tabType)
       if (tabGroup && tabGroup.length > 0) {
@@ -286,14 +288,24 @@ export default {
       const tabObjGroup = list.filter(item => item.checked)
       if (tabObjGroup && tabObjGroup.length > 0) {
         const curTab = tabObjGroup[0]
-        this.$store.commit('setNetworkOverviewCurrentTab', curTab)
+        this.changeTabState(this.curTabState.curTab, curTab)
       }
       this.$router.push({
-        params: {
+        query: {
+          ...this.$route.query,
           thirdPanel: curTable.panelIdOfThirdMenu ? curTable.panelIdOfThirdMenu : '',
           fourthPanel: toPanel || ''
         }
       })
+    },
+    changeTabState (param, value) {
+      const query = {
+        ...this.$route.query
+      }
+      query[param] = value
+      this.$router.push({
+        query: query
+      })
     }
   },
   mounted () {

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

@@ -77,6 +77,7 @@ export default {
   },
   mounted () {
     if (this.chart.panelId === drillDownPanelTypeMapping.npmOverviewIp) {
+      const self = this
       // 当client或server的session数为0时，对应tab置灰，不可选，默认高亮另一个不为0的tab
       const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
       const params = {
@@ -86,28 +87,35 @@ export default {
       }
       get(api.npm.overview.relatedSessions, params).then(res => {
         if (res.code === 200) {
-          this.sessionData = res.data.result
+          self.sessionData = res.data.result
-          this.clientSessions = this.sessionData.clientSessions / (this.sessionData.clientSessions * 1 + this.sessionData.serverSessions * 1)
+          self.clientSessions = self.sessionData.clientSessions / (self.sessionData.clientSessions * 1 + self.sessionData.serverSessions * 1)
-          this.serverSessions = this.sessionData.serverSessions / (this.sessionData.clientSessions * 1 + this.sessionData.serverSessions * 1)
+          self.serverSessions = self.sessionData.serverSessions / (self.sessionData.clientSessions * 1 + self.sessionData.serverSessions * 1)
         }
       }).finally(() => {
-        if (this.clientSessions === 0) {
+        if (self.clientSessions === 0) {
-          this.currentTab = 1
+          self.currentTab = 1
-          this.tabs[0].disable = true
+          self.tabs[0].disable = true
-          this.tabs[1].disable = false
+          self.tabs[1].disable = false
           const tabEle = document.getElementById('tab-0')
           tabEle.style.cssText = 'cursor: not-allowed;'
-        } else if (this.serverSessions === 0) {
+          setTimeout(() => {
-          this.tabs[0].disable = false
+            self.handleActiveBar(1)
-          this.tabs[1].disable = true
+          }, 400)
+        } else if (self.serverSessions === 0) {
+          self.currentTab = 0
+          self.tabs[0].disable = false
+          self.tabs[1].disable = true
           setTimeout(() => {
             const tabEle = document.getElementById('tab-1')
             tabEle.style.cssText = 'cursor: not-allowed;'
-            this.handleActiveBar(0)
+            self.handleActiveBar(0)
           }, 400)
         } else {
+          self.currentTab = 0
+          self.tabs[0].disable = false
+          self.tabs[1].disable = false
           setTimeout(() => {
-            this.handleActiveBar(0)
+            self.handleActiveBar(0)
           }, 400)
         }
       })