diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index 619ba9d9..f031b652 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -171,13 +171,6 @@ export default {
       })
       overwriteUrl(newUrl)
     },
-    queryCondition (n) {
-      const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        queryCondition: n
-      })
-      overwriteUrl(newUrl)
-    },
     timeFilter: {
       deep: true,
       handler (n) {
@@ -198,14 +191,11 @@ export default {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime)
       }
+      // const condition = this.$store.getters.getQueryCondition
+      // const condition = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
       if (this.queryCondition) {
         params.q = this.queryCondition
       }
-      // const condition = this.$store.getters.getQueryCondition
-      const condition = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
-      if (condition) {
-        params.q = condition
-      }
       this.toggleLoading(true)
       get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
         if (res.code === 200) {
diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
index bbec1cdd..2d8c0ff1 100644
--- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
@@ -15,10 +15,21 @@ import { api } from '@/utils/api'
 import chartMixin from '@/views/charts2/chart-mixin'
 import _ from 'lodash'
 import { computeScore, getChainRatio } from '@/utils/tools'
+import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 export default {
   name: 'NpmNetworkQuantity',
   components: { SingleValue },
   mixins: [chartMixin],
+  setup () {
+    const { query } = useRoute()
+    const queryCondition = ref(query.queryCondition || '')
+    const dimensionType = ref(query.dimensionType || '')
+    return {
+      queryCondition,
+      dimensionType
+    }
+  },
   data () {
     return {
       npmNetworkName: [
@@ -47,15 +58,16 @@ export default {
   },
   methods: {
     npmNetworkCycleQuery () {
-      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
+      // const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
       let condition = ''
-      if (conditionStr.indexOf('OR') > -1) {
-        condition = conditionStr.split(/["|'](.*?)["|']/)
+      if (this.queryCondition.indexOf('OR') > -1) {
+        condition = this.queryCondition.split(/["|'](.*?)["|']/)
       } else {
-        condition = conditionStr
+        condition = this.queryCondition
       }
       // const type = this.$store.getters.getDimensionType
-      const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
+      // const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
+      const type = this.dimensionType
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue
index fa7c6a17..b2a6f6f9 100644
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -49,8 +49,12 @@ export default {
   setup () {
     const { query } = useRoute()
     const metricFilter = ref(query.lineMetric || 'Bits/s')
+    const queryCondition = ref(query.queryCondition || '')
+    const dimensionType = ref(query.dimensionType || '')
     return {
       metricFilter,
+      queryCondition,
+      dimensionType,
       myChart: shallowRef(null)
     }
   },
@@ -131,15 +135,15 @@ export default {
       if (!val) {
         val = this.metricFilter
       }
-      const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
+      // const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
       let condition = ''
-      if (conditionStr.indexOf('OR') > -1) {
-        condition = conditionStr.split(/["|'](.*?)["|']/)
+      if (this.queryCondition.indexOf('OR') > -1) {
+        condition = this.queryCondition.split(/["|'](.*?)["|']/)
       } else {
-        condition = conditionStr
+        condition = this.queryCondition
       }
       // const type = this.$store.getters.getDimensionType
-      const type = this.$route.query.dimensionType ? this.$route.query.dimensionType : ''
+      const type = this.dimensionType
       if (this.chartData.id === 24) {
         this.side = 'client'
       } else if (this.chartData.id === 29) {