CN-697 feat: 补充applist的watch逻辑

src/utils/tools.js

@@ -849,7 +849,7 @@ export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
   if (Object.keys(params).length > 0) {
     newUrl += '?'
     Object.keys(params).forEach(key => {
-      newUrl += `${key}=${newParams[key]}&`
+      newUrl += `${key}=${params[key]}&`
     })
     newUrl = newUrl.substring(0, newUrl.length - 1)
   }

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

@@ -126,7 +126,7 @@ import { get, put } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
 import { getSecond } from '@/utils/date-util'
-import { getChainRatio } from '@/utils/tools'
+import {getChainRatio, overwriteUrl, urlParamsHandler} from '@/utils/tools'
 import loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
@@ -140,14 +140,6 @@ export default {
     ChartNoData
   },
   mixins: [chartMixin],
-  setup () {
-    const { query } = useRoute()
-    const metricFilter = ref(query.appListMetric || 'Bits/s')
-    return {
-      metricFilter,
-      myChart: shallowRef([])
-    }
-  },
   data () {
     return {
       metricOptions: [
@@ -187,11 +179,26 @@ export default {
       timerScroll: null,
       offset: 0,
       flag: false,
-      timerSearc: null,
+      timerSearch: null,
       loadingBody: false
     }
   },
+  setup () {
+    const { query } = useRoute()
+    const metricFilter = ref(query.appListMetric || 'Bits/s')
+    return {
+      metricFilter,
+      myChart: shallowRef([])
+    }
+  },
   watch: {
+    metricFilter (n) {
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        appListMetric: n
+      })
+      overwriteUrl(newUrl)
+    },
     showAddApp: {
       deep: true,
       handler (n) {
@@ -523,9 +530,9 @@ export default {
       e.target.scrollTop = 0
     },
     searcherAppChange (val) {
-      clearTimeout(this.timerSearc)
+      clearTimeout(this.timerSearch)
       window.addEventListener('scroll', this.scrollChange, true)
-      this.timerSearc = setTimeout(() => {
+      this.timerSearch = setTimeout(() => {
         if (this.flag) {
           return false
         }
@@ -681,7 +688,7 @@ export default {
   beforeUnmount () {
     window.removeEventListener('resize', this.resize)
     clearTimeout(this.timerScroll)
-    clearTimeout(this.timerSearc)
+    clearTimeout(this.timerSearch)
   }
 }
 </script>