fix:CN-1518 Subscriber流量曲线图的交互逻辑优化(减少请求次数),及其他模块相关代码调整

src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue

@@ -175,8 +175,8 @@ export default {
       const url = this.lineQueryCondition ? api.dnsInsight.drilldownTrafficAnalysis : api.dnsInsight.totalTrafficAnalysis
 
       axios.get(url, { params }).then(res => {
-        this.chartDateObject = res
         if (res.status === 200) {
+          this.chartDateObject = res.data.data.result
           this.showError = false
           this.isNoData = res.data.data.result.length === 0
           if (!active) {
@@ -208,28 +208,9 @@ export default {
       }
       this.toggleLoading(true)
       try {
-        const res = this.chartDateObject.data
+        this.initData(this.chartDateObject, val, active, show)
-        if (this.chartDateObject.status === 200) {
-          this.isNoData = res.data.result.length === 0
-          if (!active) {
-            this.tabs = _.cloneDeep(dataForDnsTrafficLine.tabs)
-          }
-          if (this.isNoData) {
-            this.lineTab = ''
-            this.tabs = _.cloneDeep(dataForDnsTrafficLine.tabs)
-          } else {
-            this.initData(res.data.result, val, active, show)
-          }
-        } else {
-          this.isNoData = false
-          this.showError = true
-          this.errorMsg = this.errorMsgHandler(res)
-        }
       } catch (e) {
         console.error(e)
-        this.isNoData = false
-        this.showError = true
-        this.errorMsg = this.errorMsgHandler(e)
       } finally {
         this.toggleLoading(false)
       }

src/views/charts2/charts/entityDetail/EntityDetailLine.vue

@@ -228,8 +228,8 @@ export default {
       this.toggleLoading(true)
       axios.get(`${api.entity.throughput}/${this.entity.entityType}`, { params: params }).then(response => {
         const res = response.data
-        this.chartDateObject = response
         if (response.status === 200) {
+          this.chartDateObject = res.data.result
           this.isNoData = res.data.result.length === 0
           this.showError = false
           if (!active) {
@@ -255,25 +255,9 @@ export default {
       const newVal = val ? _.clone(val) : this.metric
       this.toggleLoading(true)
       try {
-        const res = this.chartDateObject.data
+        this.initData(this.chartDateObject, newVal, active, show, n)
-        if (this.chartDateObject.status === 200) {
-          this.isNoData = res.data.result.length === 0
-          this.showError = false
-          if (!active) {
-            this.tabs = _.cloneDeep(this.tabsTemplate)
-          }
-          if (this.isNoData) {
-            this.lineTab = ''
-            this.tabs = _.cloneDeep(this.tabsTemplate)
-          } else {
-            this.initData(res.data.result, newVal, active, show, n)
-          }
-        } else {
-          this.httpError(res)
-        }
       } catch (e) {
         console.error(e)
-        this.httpError(e)
       } finally {
         this.toggleLoading(false)
       }

src/views/charts2/charts/entityDetail/lines/App.vue

@@ -167,7 +167,18 @@ export default {
       if (n === metricType.Sessions) {
         this.lineTab = 'total'
       }
-      this.init(n, 'active')
+      const { query } = this.$route
+      const rangeParam = query.range
+      const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.trafficLine || 60)
+      if (dateRangeValue !== -1) {
+        const { startTime, endTime } = getNowTime(dateRangeValue)
+        const timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), range: dateRangeValue }
+        const newUrl = urlParamsHandler(window.location.href, query, timeFilter)
+        overwriteUrl(newUrl)
+        this.init(n, 'active', timeFilter)
+      } else {
+        this.initTabData(n, 'active')
+      }
     }
   },
   methods: {
@@ -176,13 +187,13 @@ export default {
       const newUrl = urlParamsHandler(window.location.href, query, newParam)
       overwriteUrl(newUrl)
     },
-    init (val, active) {
+    init (val, active, timeFilter) {
       const newVal = val ? _.clone(val) : this.metric
 
       const params = {
         resource: this.entity.entityName,
-        startTime: getSecond(this.timeFilter.startTime),
+        startTime: timeFilter ? timeFilter.startTime : getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime),
+        endTime: timeFilter ? timeFilter.endTime : getSecond(this.timeFilter.endTime),
         metric: newVal
       }
 
@@ -193,8 +204,8 @@ export default {
       this.toggleLoading(true)
       axios.get(`${api.entity.throughput}/${this.entity.entityType}/relate/app`, { params: params }).then(response => {
         const res = response.data
-
         if (response.status === 200) {
+          this.chartDateObject = res.data.result
           this.isNoData = res.data.result.length === 0
           this.showError = false
           if (!active) {
@@ -216,6 +227,17 @@ export default {
         this.toggleLoading(false)
       })
     },
+    initTabData (val, active) {
+      const newVal = val ? _.clone(val) : this.metric
+      this.toggleLoading(true)
+      try {
+        this.initData(this.chartDateObject, newVal, active)
+      } catch (e) {
+        console.error(e)
+      } finally {
+        this.toggleLoading(false)
+      }
+    },
     echartsInit (echartsData) {
       // echarts内容在单元测试时不执行
       if (!this.isUnitTesting) {
@@ -302,7 +324,11 @@ export default {
       if (this.lineTab === item.class) return
       this.lineTab = item.class
       this.legendSelectChange(item, index, 'active')
-      this.init(this.metric, 'active')
+      if (isClick) {
+        this.initTabData(this.metric, 'active')
+      } else {
+        this.init(this.metric, 'active')
+      }
     },
     mouseenter (item) {
       if (this.isNoData) return

src/views/charts2/charts/entityDetail/lines/ServiceName.vue

@@ -196,7 +196,19 @@ export default {
           e.invertTab = true
         }
       })
-      this.init(n, this.showMarkLine, '', n)
+
+      const { query } = this.$route
+      const rangeParam = query.range
+      const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.trafficLine || 60)
+      if (dateRangeValue !== -1) {
+        const { startTime, endTime } = getNowTime(dateRangeValue)
+        const timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), range: dateRangeValue }
+        const newUrl = urlParamsHandler(window.location.href, query, timeFilter)
+        overwriteUrl(newUrl)
+        this.init(n, this.showMarkLine, '', n, timeFilter)
+      } else {
+        this.initTabData(n, this.showMarkLine, '', n)
+      }
     }
   },
   methods: {
@@ -205,13 +217,13 @@ export default {
       const newUrl = urlParamsHandler(window.location.href, query, newParam)
       overwriteUrl(newUrl)
     },
-    init (val, show, active, n) {
+    init (val, show, active, n, timeFilter) {
       const newVal = val ? _.clone(val) : this.metric
 
       const params = {
         resource: this.entity.entityName,
-        startTime: getSecond(this.timeFilter.startTime),
+        startTime: timeFilter ? timeFilter.startTime : getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime),
+        endTime: timeFilter ? timeFilter.endTime : getSecond(this.timeFilter.endTime),
         metric: newVal
       }
 
@@ -222,8 +234,8 @@ export default {
       this.toggleLoading(true)
       axios.get(`${api.entity.throughput}/${this.entity.entityType}`, { params: params }).then(response => {
         const res = response.data
-
         if (response.status === 200) {
+          this.chartDateObject = res.data.result
           this.isNoData = res.data.result.length === 0
           this.showError = false
           if (!active) {
@@ -245,6 +257,17 @@ export default {
         this.toggleLoading(false)
       })
     },
+    initTabData (val, show, active, n) {
+      const newVal = val ? _.clone(val) : this.metric
+      this.toggleLoading(true)
+      try {
+        this.initData(this.chartDateObject, newVal, active, show, n)
+      } catch (e) {
+        console.error(e)
+      } finally {
+        this.toggleLoading(false)
+      }
+    },
     echartsInit (echartsData, show) {
       // echarts内容在单元测试时不执行
       if (!this.isUnitTesting) {
@@ -389,7 +412,11 @@ export default {
         this.legendSelectChange(item, index, 'active')
         this.showMarkLine = !item.invertTab
       }
-      this.init(this.metric, this.showMarkLine, 'active')
+      if (isClick) {
+        this.initTabData(this.metric, this.showMarkLine, 'active')
+      } else {
+        this.init(this.metric, this.showMarkLine, 'active')
+      }
     },
     mouseenter (item) {
       if (this.isNoData) return

src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue

@@ -152,15 +152,9 @@ export default {
       if (!val) {
         val = this.lineMetric
       }
-      let params = {
+      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
+        startTime: timeFilter ? timeFilter.startTime : getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime)
+        endTime: timeFilter ? timeFilter.endTime : getSecond(this.timeFilter.endTime)
-      }
-      if (timeFilter) {
-        params = {
-          startTime: timeFilter.startTime,
-          endTime: timeFilter.endTime
-        }
       }
       if (this.queryCondition) {
         const condition = this.queryCondition.split(' or ')
@@ -172,9 +166,9 @@ export default {
       this.loading = true
       axios.get(api.linkMonitor.totalTrafficAnalysis, { params: params }).then(response => {
         const res = response.data
-        this.chartDateObject = response
         if (response.status === 200) {
           this.showError = false
+          this.chartDateObject = res.data.result
           this.isNoData = res.data.result.length === 0
           if (!active) {
             this.tabs = dataForLinkTrafficLine.tabs
@@ -204,28 +198,9 @@ export default {
       }
       this.loading = true
       try {
-        const res = this.chartDateObject.data
+        this.initData(this.chartDateObject, val, active, show)
-        if (this.chartDateObject.status === 200) {
-          this.showError = false
-          this.isNoData = res.data.result.length === 0
-          if (!active) {
-            this.tabs = dataForLinkTrafficLine.tabs
-          }
-          if (this.isNoData) {
-            this.lineTab = ''
-            this.tabs = dataForLinkTrafficLine.tabs
-          } else {
-            this.initData(res.data.result, val, active, show)
-          }
-        } else {
-          this.showError = true
-          this.errorMsg = this.errorMsgHandler(res)
-        }
       } catch (e) {
         console.error(e)
-        this.showError = true
-        this.errorMsg = this.errorMsgHandler(e)
-        this.isNoData = false
       } finally {
         this.loading = false
       }

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

@@ -180,17 +180,10 @@ export default {
     init (val, show, active, n, timeFilter) {
       const newVal = val ? _.clone(val) : this.metric
 
-      let params = {
+      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
+        startTime: timeFilter ? timeFilter.startTime : getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime)
+        endTime: timeFilter ? timeFilter.endTime : getSecond(this.timeFilter.endTime)
       }
-      if (timeFilter) {
-        params = {
-          startTime: timeFilter.startTime,
-          endTime: timeFilter.endTime
-        }
-      }
-
       let url
       if (this.lineQueryCondition && this.fourthMenu) {
         params.q = this.lineQueryCondition
@@ -209,8 +202,8 @@ export default {
       this.toggleLoading(true)
       axios.get(url, { params: params }).then(response => {
         const res = response.data
-        this.chartDateObject = response
         if (response.status === 200) {
+          this.chartDateObject = res.data.result
           this.isNoData = res.data.result.length === 0
           this.showError = false
           if (!active) {
@@ -236,25 +229,9 @@ export default {
       const newVal = val ? _.clone(val) : this.metric
       this.toggleLoading(true)
       try {
-        const res = this.chartDateObject.data
+        this.initData(this.chartDateObject, newVal, active, show, n)
-        if (this.chartDateObject.status === 200) {
-          this.isNoData = res.data.result.length === 0
-          this.showError = false
-          if (!active) {
-            this.tabs = _.cloneDeep(this.tabsTemplate)
-          }
-          if (this.isNoData) {
-            this.lineTab = ''
-            this.tabs = _.cloneDeep(this.tabsTemplate)
-          } else {
-            this.initData(res.data.result, newVal, active, show, n)
-          }
-        } else {
-          this.httpError(res)
-        }
       } catch (e) {
         console.error(e)
-        this.httpError(e)
       } finally {
         this.toggleLoading(false)
       }

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

@@ -143,10 +143,10 @@ export default {
       this.toggleLoading(true)
       if (params.type && params.q) {
         axios.get(api.npm.overview.trafficGraph, { params: params }).then(response => {
-          this.chartDateObject = response
           const res = response.data
           if (response.status === 200) {
             this.showError = false
+            this.chartDateObject = res.data.result
             this.isNoData = res.data.result.length === 0
             if (this.isNoData) {
               this.tabs = dataForNpmTrafficLine.tabs
@@ -198,72 +198,13 @@ export default {
       if (!val) {
         val = this.metricFilter
       }
-      let condition = ''
-      const type = this.dimensionType
-
-      if (this.lineQueryCondition.indexOf(' OR ') > -1) {
-        condition = this.lineQueryCondition.split(/["|'](.*?)["|']/)
-      } else if (this.lineQueryCondition.indexOf('+OR+') > -1) {
-        condition = this.lineQueryCondition.replace(/\+/g, ' ').split(/["|'](.*?)["|']/)
-      } else {
-        condition = this.lineQueryCondition
-      }
-
-      if (parseFloat(this.tabIndex) === 0) {
-        this.side = 'client'
-      } else if (parseFloat(this.tabIndex) === 1) {
-        this.side = 'server'
-      }
-      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime),
-        type: type
-      }
-
-      if (type === 'ip' || type === 'clientIp' || type === 'serverIp') {
-        params.q = `${condition} and side='${this.side}'`
-      } else {
-        params.q = condition
-      }
-
       this.toggleLoading(true)
-      if (params.type && params.q) {
+      try {
-        try {
+        this.initLineData(this.chartDateObject, val)
-          const res = this.chartDateObject.data
+      } catch (e) {
-          if (this.chartDateObject.status === 200) {
+        console.error(e)
-            this.showError = false
+      } finally {
-            this.isNoData = res.data.result.length === 0
+        this.toggleLoading(false)
-            if (this.isNoData) {
-              this.tabs = dataForNpmTrafficLine.tabs
-              this.npmQuantity = dataForNpmTrafficLine.npmQuantity
-            } else {
-              this.initLineData(res.data.result, val)
-            }
-          } else {
-            this.httpError(res)
-          }
-        } catch (e) {
-          this.httpError(e)
-          console.error(e)
-        } finally {
-          this.toggleLoading(false)
-        }
-      } else {
-        this.toggleLoading(true)
-        try {
-          this.showError = false
-          this.isNoData = this.chartDateObject.length === 0
-          if (this.isNoData) {
-            this.tabs = dataForNpmTrafficLine.tabs
-            this.npmQuantity = dataForNpmTrafficLine.npmQuantity
-          } else {
-            this.initLineData(this.chartDateObject, val)
-          }
-        } catch (e) {
-          this.httpError(e)
-        } finally {
-          this.toggleLoading(false)
-        }
       }
     },
     /**
@@ -417,6 +358,7 @@ export default {
       })
     },
     metricChange (value) {
+      if (this.isNoData) return
       this.initDataByCache(value)
     },
     resize () {