diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index 1d3c4938..725363da 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -349,7 +349,13 @@ export default {
         cycle: 0
       }
       if (condition && (typeof condition !== 'object') && type) {
-        params.q = condition
+        if (type === 'clientIp') {
+          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'`
+        } else if (type === 'serverIp') {
+          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'`
+        } else {
+          params.q = condition
+        }
         params.type = type
       } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}'`
diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
index 3a227d81..f6d28086 100644
--- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
@@ -77,7 +77,13 @@ export default {
         this.side = 'server'
       }
       if (condition && (typeof condition !== 'object') && type) {
-        params.q = condition
+        if (type === 'clientIp') {
+          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'`
+        } else if (type === 'serverIp') {
+          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'`
+        } else {
+          params.q = condition
+        }
         params.type = type
       } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}' and side='${this.side}'`
@@ -143,7 +149,13 @@ export default {
         this.side = 'server'
       }
       if (condition && (typeof condition !== 'object') && type) {
-        params.q = condition
+        if (type === 'clientIp') {
+          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'`
+        } else if (type === 'serverIp') {
+          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'`
+        } else {
+          params.q = condition
+        }
         params.type = type
       } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}' and side='${this.side}'`
diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue
index e2c0e4c0..09be9929 100644
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -157,7 +157,13 @@ export default {
         params.type = type
       }
       if (condition && (typeof condition !== 'object') && type) {
-        params.q = condition
+        if (type === 'clientIp') {
+          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'`
+        } else if (type === 'serverIp') {
+          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'`
+        } else {
+          params.q = condition
+        }
       } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}' and side='${this.side}'`
       } else if (condition.length > 1 && type && type !== 'ip') {