CN-772: 解决状态保留相关bug

src/router/index.js

@@ -72,4 +72,6 @@ const router = createRouter({
   routes: routes
 })
 
+window.localRouterHistoryList = []
+
 export default router

src/views/charts2/Panel.vue

@@ -190,7 +190,6 @@ export default {
     const cancelList = store.state.panel.httpCancel
 
     // 进入页面时，发现有未结束的请求，终止请求
-    // console.log('panel.vue------setup------查看http终止情况', cancelList, cancelList.length)
     if (cancelList.length > 0) {
       cancelList.forEach((cancel, index) => {
         cancel()
@@ -200,19 +199,20 @@ export default {
 
     const panel = ref({})
     let panelType = 1 // 取得panel的type
-    const { params, query, path } = useRoute()
+    let { params, query, path } = useRoute()
-    // 只要当前路由和vuex里的路由一致，且vuex存储的range有值，即代表已经下钻后返回，此时直接使用vuex里存储的时间范围
+
-    if (path === store.getters.getRouterPath && store.getters.getTimeRangeFlag !== null) {
+    // 获取路由跳转过的历史状态，赋值给当前界面，起到保留状态的作用，如浏览器的回退前进等
-      const newUrl = urlParamsHandler(window.location.href, query, {
+    const routerObj = window.localRouterHistoryList.find(item => item.t === query.t)
-        startTime: store.getters.getTimeRangeArray[0],
+    if (routerObj) {
-        endTime: store.getters.getTimeRangeArray[1],
+      params = routerObj.params
-        range: store.getters.getTimeRangeFlag
+      query = routerObj.query
-      })
+      path = routerObj.path
+
+      // 如果当前界面之前载入过，获取状态后更新地址栏，以便后续的赋值操作
+      const newUrl = urlParamsHandler(window.location.href, useRoute().query, query)
       overwriteUrl(newUrl)
-    } else {
-      store.commit('setTimeRangeArray', [])
-      store.commit('setTimeRangeFlag', null)
     }
+
     const thirdPanel = query.thirdPanel
     const fourthPanel = query.fourthPanel
     if (fourthPanel) {
@@ -231,6 +231,7 @@ export default {
     const startTimeParam = query.startTime
     const endTimeParam = query.endTime
     // 若url携带了，使用携带的值，否则使用默认值。
+
     const dateRangeValue = rangeParam ? parseInt(query.range) : (isEntityDetail(panelType) ? 60 * 24 : 60)
     const timeFilter = ref({ dateRangeValue })
     if (!startTimeParam || !endTimeParam) {
@@ -241,19 +242,20 @@ export default {
       timeFilter.value.startTime = parseInt(startTimeParam)
       timeFilter.value.endTime = parseInt(endTimeParam)
     }
-    store.commit('setRouterPath', path)
 
     // npm是否展示分数
     const showScorePanel = [drillDownPanelTypeMapping.npmOverviewIp, drillDownPanelTypeMapping.npmOverviewDomain, drillDownPanelTypeMapping.npmOverviewApp, drillDownPanelTypeMapping.npmOverviewCommon, drillDownPanelTypeMapping.npmThirdMenu]
     const showScore = showScorePanel.indexOf(panelType) > -1
 
     const metric = ref(query.metric || 'Bits/s')
+
     return {
       panelType,
       panel,
       timeFilter,
       showScore,
-      metric
+      metric,
+      path
     }
   },
   methods: {
@@ -324,6 +326,19 @@ export default {
       })
       overwriteUrl(newUrl)
     }
+  },
+  /**
+   * 页面销毁前，更新历史中已保存的状态
+   * 之所以会在下钻时、销毁前保存状态，是因为panel第一次下钻时，beforeUnmount获取不到下钻前参数
+   */
+  beforeUnmount () {
+    const query = this.$_.cloneDeep(this.$route.query)
+    const routerObj = window.localRouterHistoryList.find(item => item.t === query.t)
+    if (routerObj !== undefined) {
+      if (Object.getOwnPropertyNames(query).length >= Object.getOwnPropertyNames(routerObj.query).length) {
+        routerObj.query = query
+      }
+    }
   }
 }
 </script>

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

@@ -1117,6 +1117,8 @@ export default {
     * */
     handleTabValue (columnName, columnValue) {
       // console.log('NetworkOverview类------handleTabValue：下钻')
+      // 下钻前保存当前路由状态
+      this.beforeRouterPush()
       const clickTab = this.getTabByName(columnName)// 下钻后，显示的下钻tab对应的drilldownTabs
       const tabLable = clickTab.label
       const tabName = clickTab.name
@@ -1199,6 +1201,34 @@ export default {
         }
       })
     },
+    /**
+     * 在路由跳转前，即下钻前将路由数据保存起来，确保回退和前进保留当时状态
+     */
+    beforeRouterPush () {
+      const currentRouter = this.$_.cloneDeep(this.$route.query)
+
+      const tempObj = {
+        t: currentRouter.t,
+        query: currentRouter,
+        path: this.$_.cloneDeep(this.$route.path),
+        params: this.$_.cloneDeep(this.$route.params)
+      }
+      if (window.localRouterHistoryList.length > 0) {
+        let flag = true
+        window.localRouterHistoryList.forEach((item, index) => {
+          if (item.t === currentRouter.t) {
+            window.localRouterHistoryList[index] = tempObj
+            flag = false
+          }
+          if (!flag) {
+            return true
+          }
+        })
+        if (flag) window.localRouterHistoryList.push(tempObj)
+      } else {
+        window.localRouterHistoryList.push(tempObj)
+      }
+    },
     handleSearchParams (columnValue) {
       columnValue = columnValue.replaceAll("'", "\\\\'")
       const queryCondition = []