diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index 725363da..42caf4b8 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -353,6 +353,10 @@ export default {
           params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'`
         } else if (type === 'serverIp') {
           params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'`
+        } else if (type === 'clientCity') {
+          params.q = `client_city='${condition.split(/'(.*?)'/)[1]}' and side='client'`
+        } else if (type === 'serverCity') {
+          params.q = `server_city='${condition.split(/'(.*?)'/)[1]}' and side='server'`
         } else {
           params.q = condition
         }
diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
index f6d28086..1bf7303f 100644
--- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
@@ -81,6 +81,10 @@ export default {
           params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'`
         } else if (type === 'serverIp') {
           params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'`
+        } else if (type === 'clientCity') {
+          params.q = `client_city='${condition.split(/'(.*?)'/)[1]}' and side='client'`
+        } else if (type === 'serverCity') {
+          params.q = `server_city='${condition.split(/'(.*?)'/)[1]}' and side='server'`
         } else {
           params.q = condition
         }
@@ -103,6 +107,7 @@ export default {
       if (type && condition) {
         this.toggleLoading(true)
         get(api.npm.overview.networkAnalysis, params).then(res => {
+          console.log(res)
           if (res.code === 200) {
             this.npmNetworkCycleData = res.data.result
           }
@@ -153,6 +158,10 @@ export default {
           params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'`
         } else if (type === 'serverIp') {
           params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'`
+        } else if (type === 'clientCity') {
+          params.q = `client_city='${condition.split(/'(.*?)'/)[1]}' and side='client'`
+        } else if (type === 'serverCity') {
+          params.q = `server_city='${condition.split(/'(.*?)'/)[1]}' and side='server'`
         } else {
           params.q = condition
         }
diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue
index 09be9929..f01cc879 100644
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -161,6 +161,10 @@ export default {
           params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'`
         } else if (type === 'serverIp') {
           params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'`
+        } else if (type === 'clientCity') {
+          params.q = `client_city='${condition.split(/'(.*?)'/)[1]}' and side='client'`
+        } else if (type === 'serverCity') {
+          params.q = `server_city='${condition.split(/'(.*?)'/)[1]}' and side='server'`
         } else {
           params.q = condition
         }