fix Network & APP Performance 下钻 请求参数动态获取

src/views/charts2/charts/SingleValue.vue

@@ -110,19 +110,23 @@ import { getChainRatio } from '@/utils/tools'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
+import _ from 'lodash'
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'SingleValue',
   props: {
     npmNetworkCycleData: Array,
-    npmNetworkName: Array,
+    npmNetworkName: Array
-    timeFilter: Object
   },
+  mixins: [chartMixin],
   data () {
     return {
       unitTypes,
       unitConvert,
       npmNetworkData: [],
-      npmNetworkLastCycleData: []
+      npmNetworkLastCycleData: [],
+      side: '',
+      chartData: {}
     }
   },
   watch: {
@@ -152,11 +156,22 @@ export default {
       this.npmNetworkData = cycle
     },
     npmNetworkLastCycleQuery () {
+      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      const type = this.$store.getters.getDimensionType
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         cycle: 1
       }
+      if (this.chartData.id === 23) {
+        this.side = 'client'
+      } else {
+        this.side = 'server'
+      }
+      if (condition && type) {
+        params.q = `${type}='${condition[1]}' and side='${this.side}'`
+        params.type = type
+      }
       const tcp = get(api.npm.overview.tcpSessionDelay, params)
       const http = get(api.npm.overview.httpResponseDelay, params)
       const ssl = get(api.npm.overview.sslConDelay, params)
@@ -171,6 +186,11 @@ export default {
         })
       })
     }
+  },
+  mounted () {
+    if (this.chart) {
+      this.chartData = _.cloneDeep(this.chart)
+    }
   }
 }
 </script>

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

@@ -276,6 +276,8 @@ export default {
             }
           })
         }
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     },
     metricChange (value) {

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

@@ -63,8 +63,6 @@ export default {
             if (res.data.result.length === 0) {
               this.isNoData = true
               return
-            } else {
-              this.isNoData = false
             }
             res.data.result = res.data.result.map(t => {
               if (t.eventSeverity === 'critical') {
@@ -91,6 +89,8 @@ export default {
             }
             this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
             this.myChart.setOption(this.chartOption)
+          } else {
+            this.isNoData = true
           }
         }).finally(() => {
           this.loading1 = false

src/views/charts2/charts/npm/NpmAppCategoryScore.vue

@@ -102,7 +102,6 @@ import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import { getChainRatio, computeScore } from '@/utils/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
-import Loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
   name: 'NpmAppCategoryScore',
@@ -130,7 +129,6 @@ export default {
     }
   },
   components: {
-    Loading,
     ChartNoData
   },
   mixins: [chartMixin],

src/views/charts2/charts/npm/NpmLine.vue

@@ -80,9 +80,9 @@ export default {
       ],
       timer: null,
       myChartArray: [],
-      side: 'server',
+      side: this.$store.state.panel.npmLocationSide,
-      country: '',
+      country: this.$store.state.panel.npmLocationCountry,
-      province: '',
+      // province: '',
       throughputName: '',
       tcpName: '',
       httpName: '',
@@ -91,30 +91,46 @@ export default {
       packetsRetrainsName: ''
     }
   },
+  watch: {
+    '$store.state.panel.npmLocationSide': {
+      deep: true,
+      handler (n) {
+        this.side = n
+        this.init()
+      }
+    },
+    '$store.state.panel.npmLocationCountry': {
+      deep: true,
+      handler (n) {
+        this.country = n
+        this.init()
+      }
+    }
+  },
   methods: {
     init () {
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         side: this.side,
-        country: this.country,
+        country: this.country
-        province: this.province
+        // province: this.province
       }
       this.toggleLoading(true)
       if (this.chartData.id === 11) {
-        throughputData.forEach((t, i) => {
-          if (t.type === 'totalBytesRate') {
-            this.chartOptionLineData[i].values = t.values
-          } else if (t.type === 'inboundBytesRate') {
-            this.chartOptionLineData[i].values = t.values
-          } else if (t.type === 'outboundBytesRate') {
-            this.chartOptionLineData[i].values = t.values
-          }
-        })
-        const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
         get(api.npm.location.thoughput, params).then(res => {
           if (res.code === 200) {
-            this.echartsInit(result, this.chartData.name, this.chartData.params.unitType)
+            res.data.result.forEach((t, i) => {
+              if (t.type === 'totalBytesRate') {
+                this.chartOptionLineData[i].values = t.values
+              } else if (t.type === 'inboundBytesRate') {
+                this.chartOptionLineData[i].values = t.values
+              } else if (t.type === 'outboundBytesRate') {
+                this.chartOptionLineData[i].values = t.values
+              }
+            })
+            const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
+            this.echartsInit(result, this.chartData, this.chartData.params.unitType)
           } else {
             this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
@@ -124,7 +140,7 @@ export default {
       } else if (this.chartData.id === 12) {
         get(api.npm.location.tcpConnectionEstablishLatency, params).then(res => {
           if (res.code === 200) {
-            this.echartsInit(tcpData, this.chartData.name, this.chartData.params.unitType)
+            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
           } else {
             this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
@@ -134,7 +150,7 @@ export default {
       } else if (this.chartData.id === 13) {
         get(api.npm.location.httpResponseLatency, params).then(res => {
           if (res.code === 200) {
-            this.echartsInit(httpData, this.chartData.name, this.chartData.params.unitType)
+            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
           } else {
             this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
@@ -144,7 +160,7 @@ export default {
       } else if (this.chartData.id === 14) {
         get(api.npm.location.sslHandshakeLatency, params).then(res => {
           if (res.code === 200) {
-            this.echartsInit(sslData, this.chartData.name, this.chartData.params.unitType)
+            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
           } else {
             this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
@@ -154,7 +170,7 @@ export default {
       } else if (this.chartData.id === 15) {
         get(api.npm.location.packetsLoss, params).then(res => {
           if (res.code === 200) {
-            this.echartsInit(packetsLossData, this.chartData.name, this.chartData.params.unitType)
+            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
           } else {
             this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
@@ -164,7 +180,7 @@ export default {
       } else if (this.chartData.id === 16) {
         get(api.npm.location.packetsRetrains, params).then(res => {
           if (res.code === 200) {
-            this.echartsInit(packetsRetrainsData, this.chartData.name, this.chartData.params.unitType)
+            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
           } else {
             this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
           }
@@ -173,8 +189,8 @@ export default {
         })
       }
     },
-    echartsInit (data, name, type) {
+    echartsInit (data, chartData, type) {
-      const dom = document.getElementById(`chart${name}`)
+      const dom = document.getElementById(`chart${chartData.name}`)
       if (dom) {
         this.myChart = echarts.init(dom)
         this.chartOption = npmLineChartOption
@@ -183,7 +199,7 @@ export default {
         this.chartOption.series = data.map((t, i) => {
           return {
             ...seriesTemplate,
-            name: t.legend ? t.legend : t.type,
+            name: t.legend ? t.legend : this.$_.get(chartData, 'i18n') || chartData.name,
             stack: this.chartData.params.isStack ? 'network.total' : '',
             lineStyle: {
               width: 1

src/views/charts2/charts/npm/NpmNetworkQuantity.vue

@@ -4,6 +4,7 @@
       :npm-network-cycle-data="npmNetworkCycleData"
       :npm-network-name="npmNetworkName"
       :time-filter="timeFilter"
+      :chartData="chartData"
     ></single-value>
   </div>
 </template>
@@ -14,6 +15,7 @@ import { get } from '@/utils/http'
 import { getSecond } from '@/utils/date-util'
 import { api } from '@/utils/api'
 import chartMixin from '@/views/charts2/chart-mixin'
+import _ from 'lodash'
 export default {
   name: 'NpmNetworkQuantity',
   components: { SingleValue },
@@ -27,16 +29,29 @@ export default {
         { name: 'networkAppPerformance.packetLoss' },
         { name: 'overall.packetRetrans' }
       ],
-      npmNetworkCycleData: []
+      npmNetworkCycleData: [],
+      side: '',
+      chartData: {}
     }
   },
   methods: {
     npmNetworkCycleQuery () {
+      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      const type = this.$store.getters.getDimensionType
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         cycle: 0
       }
+      if (this.chartData.id === 23) {
+        this.side = 'client'
+      } else {
+        this.side = 'server'
+      }
+      if (condition && type) {
+        params.q = `${type}='${condition[1]}' and side='${this.side}'`
+        params.type = type
+      }
       const tcp = get(api.npm.overview.tcpSessionDelay, params)
       const http = get(api.npm.overview.httpResponseDelay, params)
       const ssl = get(api.npm.overview.sslConDelay, params)
@@ -56,6 +71,9 @@ export default {
 
   },
   mounted () {
+    if (this.chart) {
+      this.chartData = _.cloneDeep(this.chart)
+    }
     this.npmNetworkCycleQuery()
   }
 }

src/views/charts2/charts/npm/NpmTabs.vue

@@ -26,9 +26,6 @@ export default {
     }
   },
   mixins: [chartMixin],
-  props: {
-    chart: Object
-  },
   watch: {
     currentTab (n) {
       this.$nextTick(() => {

src/views/charts2/charts/npm/NpmTrafficLine.vue

@@ -22,15 +22,10 @@ import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import _ from 'lodash'
+import chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'NpmTrafficLine',
-  props: {
+  mixins: [chartMixin],
-    chart: Object,
-    timeFilter: Object,
-    // type: String,
-    // side: String,
-    // ip: String
-  },
   components: {
     ChartNoData
   },
@@ -43,10 +38,7 @@ export default {
     return {
       unitConvert,
       unitTypes,
-      isNoData: false,
-      ip: '116.178.236.216',
       side: '',
-      type: 'ip',
       mpackets: [
         { name: 'network.total', show: true, positioning: 0, data: [], unitType: '' },
         { name: 'network.inbound', show: true, positioning: 1, data: [], unitType: '' },
@@ -60,8 +52,8 @@ export default {
   },
   methods: {
     init () {
-      const condition = this.$store.getters.getQueryCondition
+      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
-      console.log(condition)
+      const type = this.$store.getters.getDimensionType
       if (this.chartData.id === 24) {
         this.side = 'client'
       } else {
@@ -70,16 +62,11 @@ export default {
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
-        q: `ip='${this.ip}' and side='${this.side}'`,
+        q: `${type}='${condition[1]}' and side='${this.side}'`,
-        type: 'ip'
+        type: type
       }
-      // if (condition) {
-      //   params.q = condition
-      //   params.type = this.type
-      // }
       get(api.npm.overview.trafficGraph, params).then((res) => {
         if (res.code === 200) {
-          // res.data.result.length = 0
           if (res.data.result.length === 0) {
             this.isNoData = true
             return
@@ -116,6 +103,8 @@ export default {
         } else {
           this.isNoData = true
         }
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     },
     echartsInit (echartsData) {
@@ -221,4 +210,3 @@ export default {
   }
 }
 </script>
-

src/views/charts2/charts/npm/RelatedSessions.vue

@@ -35,30 +35,27 @@ import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import unitConvert from '@/utils/unit-convert'
 import { unitTypes } from '@/utils/constants'
+import chartMixin from '@/views/charts2/chart-mixin'
 
 export default {
   name: 'RelatedSessions',
-  props: {
+  mixins: [chartMixin],
-    chart: Object,
-    timeFilter: Object,
-    // ip: String
-  },
   data () {
     return {
       sessionData: {},
       unitConvert,
       unitTypes,
       clientSessions: 0,
-      serverSessions: 0,
+      serverSessions: 0
-      ip: '116.178.236.216'
     }
   },
   methods: {
     relatedSessionsData () {
+      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
-        ip: this.ip
+        ip: condition[1]
       }
       const divGreen = document.getElementById('green')
       const divred = document.getElementById('red')
@@ -77,6 +74,8 @@ export default {
           divGreen.style.width = this.sessionData.clientSessions
           divred.style.width = this.sessionData.serverSessions
         }
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     }
   },