fix: CN-1518 实体详情流量曲线图的交互逻辑优化（减少请求次数）

src/views/charts2/Panel.vue

@@ -414,10 +414,10 @@ export default {
       const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.dashboard || 60)
       if (dateRangeValue !== -1) {
         const { startTime, endTime } = getNowTime(dateRangeValue)
-        this.timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), dateRangeValue: dateRangeValue }
+        // this.timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), dateRangeValue: dateRangeValue }
         this.$store.commit('setTimeRangeArray', [this.timeFilter.startTime, this.timeFilter.endTime])
         this.$store.commit('setTimeRangeFlag', dateRangeValue.value)
-        params = { metric: value, startTime: this.timeFilter.startTime, endTime: this.timeFilter.endTime, range: dateRangeValue }
+        params = { metric: value, startTime: getSecond(startTime), endTime: getSecond(endTime), range: dateRangeValue }
       }
       const newUrl = urlParamsHandler(window.location.href, query, params)
       overwriteUrl(newUrl)

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

@@ -610,7 +610,7 @@ export default {
     }
     this.chartOption = null
     this.unitConvert = null
-    this.this.chartDateObject = []
+    this.chartDateObject = []
   }
 }
 </script>

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

@@ -168,7 +168,8 @@ export default {
       brushHistory: [],
       showError: false,
       errorMsg: '',
-      metricOptions
+      metricOptions,
+      isMetricChange: false
     }
   },
   watch: {
@@ -183,12 +184,15 @@ export default {
     },
     timeFilter: {
       handler () {
+        if (!this.isMetricChange) {
           if (this.lineTab) {
             this.init(this.metric, this.showMarkLine, 'active')
           } else {
             this.init()
           }
         }
+        this.isMetricChange = false
+      }
     },
     metric (n) {
       this.handleActiveBar()
@@ -224,7 +228,7 @@ 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.isNoData = res.data.result.length === 0
           this.showError = false
@@ -247,6 +251,33 @@ export default {
         this.toggleLoading(false)
       })
     },
+    initTabData (val, show, active, n) {
+      const newVal = val ? _.clone(val) : this.metric
+      this.toggleLoading(true)
+      try {
+        const res = this.chartDateObject.data
+        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)
+      }
+    },
     echartsInit (echartsData, show) {
       // echarts内容在单元测试时不执行
       if (!this.isUnitTesting) {
@@ -391,7 +422,12 @@ export default {
         this.legendSelectChange(item, index, 'active')
         this.showMarkLine = !item.invertTab
       }
+
+      if (isClick) {
+        this.initTabData(this.metric, this.showMarkLine, 'active')
+      } else {
         this.init(this.metric, this.showMarkLine, 'active')
+      }
     },
     mouseenter (item) {
       if (this.isNoData) return
@@ -654,10 +690,20 @@ export default {
       this.errorMsg = this.errorMsgHandler(e)
     },
     metricChange (value) {
+      this.isMetricChange = true
       const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
+      const rangeParam = query.range
-        metric: value
+      let params = { metric: value }
-      })
+      // 优先级：url > config.js > 默认值。
+      const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.trafficLine || 60)
+      if (dateRangeValue !== -1) {
+        const { startTime, endTime } = getNowTime(dateRangeValue)
+        this.timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), dateRangeValue: dateRangeValue }
+        this.$store.commit('setTimeRangeArray', [this.timeFilter.startTime, this.timeFilter.endTime])
+        this.$store.commit('setTimeRangeFlag', dateRangeValue.value)
+        params = { metric: value, startTime: this.timeFilter.startTime, endTime: this.timeFilter.endTime, range: dateRangeValue }
+      }
+      const newUrl = urlParamsHandler(window.location.href, query, params)
       overwriteUrl(newUrl)
     },
     reload (startTime, endTime, dateRangeValue) {
@@ -716,6 +762,7 @@ export default {
     // 检测时发现该方法占用较大内存，且未被释放
     this.unitConvert = null
     this.valueToRangeValue = null
+    this.chartDateObject = []
     myChart = null
   }
 }

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

@@ -156,8 +156,20 @@ export default {
           e.invertTab = true
         }
       })
+      const { query } = this.$route
+      const rangeParam = query.range
+      if (rangeParam !== -1) {
+        let timeFilter = {}
+        if (query.startTime && query.endTime) {
+          timeFilter = { startTime: parseInt(query.startTime), endTime: parseInt(query.endTime) }
+          this.init(n, this.showMarkLine, '', n, timeFilter)
+        } else {
           this.init(n, this.showMarkLine, '', n)
         }
+      } else {
+        this.initTabData(n, this.showMarkLine, '', n)
+      }
+    }
   },
   methods: {
     reloadUrl (newParam) {
@@ -165,13 +177,19 @@ 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 = {
+      let params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime)
       }
+      if (timeFilter) {
+        params = {
+          startTime: timeFilter.startTime,
+          endTime: timeFilter.endTime
+        }
+      }
 
       let url
       if (this.lineQueryCondition && this.fourthMenu) {

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

@@ -242,7 +242,7 @@ export default {
           } else {
             this.httpError(res)
           }
-        } catch(e) {
+        } catch (e) {
           this.httpError(e)
           console.error(e)
         } finally {
@@ -259,7 +259,7 @@ export default {
           } else {
             this.initLineData(this.chartDateObject, val)
           }
-        } catch(e) {
+        } catch (e) {
           this.httpError(e)
         } finally {
           this.toggleLoading(false)