CN-593 fix: 调整endtime的实现逻辑

public/config.json

@@ -1 +1 @@
-{"baseUrl": "http://192.168.44.53:8090/", "version": "2.0.2021.05.11.19.43","performanceEndTimeInterval": 86400}
+{"baseUrl": "http://192.168.44.53:8090/", "version": "2.0.2021.05.11.19.43"}

src/permission.js

@@ -20,7 +20,6 @@ router.beforeEach(async (to, from, next) => {
   if (!axios.defaults.baseURL) {
     const config = await getConfigJson()
     axios.defaults.baseURL = config.baseUrl
-    axios.defaults.performanceEndTimeInterval = config.performanceEndTimeInterval
   }
   if (localStorage.getItem(storageKey.token)) {
     // 加载i18n

src/utils/constants.js

@@ -25,8 +25,7 @@ export const storageKey = {
   entitySearchHistory: 'cn-entity-search-history',
   echartLegendFontSize: 'echartLegendFontSize',
   echartLabelFontSize: 'echartLabelFontSize',
-  tokenExpireCurrentPath: 'token-expire-current-path',
+  tokenExpireCurrentPath: 'token-expire-current-path'
-  performanceEndTimeInterval: 'performance-endTime-interval'
 }
 
 // 统一定义跳转来源

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -180,13 +180,13 @@
       </div>
       <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
         <div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
-        <div class="row__content row__content--width200">
+        <div class="row__content">
           <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
           <div>{{performance.eventType}}</div>
         </div>
-        <div class="row__content-loading"  style="position: relative;" >
+        <div class="row__content-loading"  style="position: relative; padding-left: 10px;">
           <loading :loading="!loadingAlert && loadingPerformance[index]?loadingPerformance[index]:false" :id="`loading${entity.ipAddr}_${index}`" size="small"></loading>
-          <div class="row__charts"  :id="`entityPerformanceChart${entity.ipAddr}_${index}`"></div>
+          <div class="row__charts" :id="`entityPerformanceChart${entity.ipAddr}_${index}`"></div>
         </div>
         <div class="row__desc"></div>
       </div>

src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js

@@ -45,7 +45,9 @@ export default {
       },
       metricChart: null,
       performanceChartList: [],
-      loadingPerformance: []
+      loadingPerformance: [],
+
+      performanceMetricEndTimeInterval: 3600 // 服务质量事件指标的结束时间与开始时间的秒间隔
     }
   },
   computed: {
@@ -191,18 +193,14 @@ export default {
     },
     queryEntityDetailPerformanceChart (performanceList, startIndex) {
       if (performanceList && performanceList.length > 0) {
-        const self = this
-        const performanceEndTimeInterval = axios.defaults.performanceEndTimeInterval
-        const allTime = Number(performanceEndTimeInterval || 86401)
-
         performanceList.forEach((item, i) => {
           const index = startIndex + i
           this.loadingPerformance[index] = true
           const startTime = getSecond(item.startTime)
-          const endTime = getSecond(item.startTime) + allTime
+          const endTime = getSecond(item.startTime) + this.performanceMetricEndTimeInterval
           const nowTime = getSecond(new Date())
-          this.searchStartTime = startTime - allTime / 2
+          const searchStartTime = startTime - this.performanceMetricEndTimeInterval / 2
-          this.searchEndTime = _.min([nowTime, endTime + allTime / 2])
+          const searchEndTime = _.min([nowTime, endTime + this.performanceMetricEndTimeInterval / 2])
           let url
           if (item.eventType === 'dns error') {
             url = api.detection.performanceEvent.dnsErrorMetric
@@ -214,9 +212,9 @@ export default {
 
           if (url) {
             get(url, {
-              ...self.getPerformanceQueryParams(),
+              ...this.getPerformanceQueryParams(),
-              startTime: self.searchStartTime,
+              startTime: searchStartTime,
-              endTime: self.searchEndTime,
+              endTime: searchEndTime,
               eventType: item.eventType
             }).then((response) => {
               if (response.code === 200) {
@@ -224,12 +222,10 @@ export default {
                 this.$nextTick(() => {
                   if (metricDataList && metricDataList.length > 0) {
                     metricDataList.sort(reverseSortBy(0))// 将返回的数据按时间降序排序，方便找到实线和虚线的交点
-                    // let endIndex = (self.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
                     let endIndex = (metricDataList).findIndex((item) => item[0] <= endTime)
                     endIndex = metricDataList.length - endIndex
 
                     metricDataList.sort(sortBy(0))// 将返回的数据按时间升序排序，方便找到实线和虚线的交点
-                    // let startIndex = (self.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
                     const startIndex = metricDataList.findIndex((item) => item[0] >= startTime)
 
                     const performanceChartOption = _.cloneDeep(metricOption)
@@ -238,25 +234,25 @@ export default {
                       performanceChartOption.series[1].data = metricDataList.slice(startIndex - 1, endIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
                       performanceChartOption.series[2].data = metricDataList.slice(endIndex - 1, metricDataList.length).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
                     }
-                    const metricChart = markRaw(echarts.init(document.getElementById(`entityPerformanceChart${self.entityName}_${index}`)))
+                    const metricChart = markRaw(echarts.init(document.getElementById(`entityPerformanceChart${this.entityName}_${index}`)))
                     performanceChartOption && metricChart.setOption(performanceChartOption)
-                    self.performanceChartList.push(metricChart)
+                    this.performanceChartList.push(metricChart)
                     this.echartsArray.push(shallowRef(metricChart))
                   } else {
-                    const chartDom = document.getElementById(`entityPerformanceChart${self.entityName}${index}`)
+                    const chartDom = document.getElementById(`entityPerformanceChart${this.entityName}${index}`)
                     chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
                   }
                 })
               }
             }).catch(error => {
-              console.log(error)
+              console.error(error)
-              const chartDom = document.getElementById(`entityPerformanceChart${self.entityName}${index}`)
+              const chartDom = document.getElementById(`entityPerformanceChart${this.entityName}${index}`)
               chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
             }).finally(() => {
               setTimeout(() => {
                 try {
                   this.$nextTick(() => {
-                    self.performanceChartList.forEach(item => {
+                    this.performanceChartList.forEach(item => {
                       item && item.resize()
                     })
                     this.loadingPerformance[index] = false