CN-399 Detection--服务质量事件 指标变化曲线开发

src/views/detections/overview/DetectionPerformanceEventAppOverview.vue

@@ -61,8 +61,14 @@
 </template>
 
 <script>
-import { api, getData } from '@/utils/api'
 import { eventSeverityColor } from '@/utils/constants'
+import { api, getData } from '@/utils/api'
+import { unitTypes } from '@/utils/constants'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import * as echarts from 'echarts'
+import { metricOption } from '@/views/detections/options/detectionOptions'
+import { sortBy,reverseSortBy } from '@/utils/tools'
 export default {
   name: 'DetectionPerformanceEventAppOverview',
   props: {
@@ -71,7 +77,8 @@ export default {
   data () {
     return {
       eventSeverityColor,
-      basicInfo: {}
+      basicInfo: {},
+      metricList:[[1435781430781, "1"], [1435781431781, "5"],[1435781432781, "5"], [1435781433781, "3"],[1435781434781, "4"], [1435781435781, "5"]],
     }
   },
   computed: {
@@ -102,7 +109,71 @@ export default {
       this.queryBasic().then(responses => {
         responses && (this.basicInfo = responses)
       })
+      this.queryMetric().then(responses => {
+        responses && (this.metricList = responses.values)
+        this.initChart()
+      }).catch(error => {
+        console.log(error)
+      }).finally(() => {
+        setTimeout(() => {
+          try {
+            this.$nextTick(() => {
+              console.log(this.metricChart)
+              this.metricChart && this.metricChart.resize()
+            })
+          } catch (e) {}
+        }, 250)
+      })
     },
+
+    initChart(){
+      this.metricChart = echarts.init(document.getElementById('detectionMetricChartDomain'))
+      this.chartOptionMetric = _.cloneDeep(this.chartOption)
+
+      this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
+      //let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
+      let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime*1000 );
+      endIndex = this.metricList.length-endIndex
+
+      this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
+      //let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+      let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  this.detection.startTime*1000 );
+
+      if(startIndex >-1 && endIndex >-1){
+        this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+      }
+
+      this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
+      console.log(this.chartOptionMetric)
+    },
+
+    queryMetric() {
+      return new Promise((resolve, reject) => {
+        try {
+          let allTime = this.detection.endTime-this.detection.startTime
+          let nowTime = getSecond(new Date())
+          this.searchStartTime = this.detection.startTime-allTime/2
+          this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)])
+
+          get(api.detection.performanceEvent.metric, {
+            domain: this.detection.domain,
+            startTime: this.searchStartTime*1000,
+            endTime: this.searchEndTime*1000,
+          }).then((response) => {
+            if (response.code === 200) {
+              resolve(response.data.result[0])
+            } else {
+              reject(response)
+            }
+          })
+        } catch (e) {
+          reject(e)
+        }
+      })
+    },
+
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
@@ -129,6 +200,11 @@ export default {
   },
   mounted () {
     this.query()
-  }
+  },
+  setup () {
+    return {
+      chartOption: metricOption,
+    }
+  },
 }
 </script>