From c9f34523e036d01dd3f160f74bde803ba1efb0f7 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 7 Sep 2022 20:41:55 +0800
Subject: [PATCH] =?UTF-8?q?CN-697=20feat:=20=E8=A1=A5=E5=85=85applist?=
 =?UTF-8?q?=E7=9A=84watch=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/tools.js                            |  2 +-
 .../networkOverview/NetworkOverviewApps.vue   | 33 +++++++++++--------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/utils/tools.js b/src/utils/tools.js
index 3021b6e1..9f1d8365 100644
--- a/src/utils/tools.js
+++ b/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)
   }
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index 3a62ee14..91d0971c 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/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>